margin | 易学教程

50道 CSS 经典题

阅读更多关于 50道 CSS 经典题

1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽 3 CSS选择器有哪些？哪些属性可以继承？ CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）可继承的属性：font-size, font-family, color 不可继承的样式：border, padding, margin, width, height 优先级（就近原则）：

markdown样式代码保存

阅读更多关于 markdown样式代码保存

/*此样式是没任何效果的，留给你填写的你可以随意修改，组合你想要的css样式没有最好的，只有最合适的，看看后面的示例，你就会懂得写个你最爱的样式，并保存了的！建议先复制某一你喜欢的css模板样式到此样式下，再在此基础上自定义自己的css样式。来试试吧！ ^_^*/ h1,h2,h3,h4,h5,h6 { color: #3e3e3e; } h1 span,h2 span,h3 span,h4 span{ border-left: 5px solid #ff5722; padding-left: 10px; } h1{ border-bottom:2px solid #ff5722; line-height: 38px; } h1 span{ color: white; background: #ff5722; border-left: 0; padding: 0 10px; border-top-left-radius: 8px; border-top-right-radius: 8px; } /* 一级标题 */ h1 { border-bottom:2px solid #ff5722; font-size:1.3em; } /* 一级标题内容 */ h1 span { display:inline-block; font-weight:normal;

Web—02-轻松理解css

阅读更多关于 Web—02-轻松理解css

CSS基本语法以及页面引用 CSS基本语法 css的定义方法是：选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例： /* css注释 ctrl+shift+"/" */ div{ width:100px; height:100px; color:red } CSS页面引入方法 1、外联式：通过link标签，链接到外部样式表到页面中。 <link rel="stylesheet" type="text/css" href="css/main.css">` 2、嵌入式：通过style标签，在网页上创建嵌入的样式表。 <style type="text/css"> div{ width:100px; height:100px; color:red } ...... </style> 3、内联式：通过标签的style属性，在标签上直接写样式。 <div style="width:100px; height:100px; color:red ">......</div> CSS文本设置常用的应用文本的css样式： color 设置文字的颜色，如： color:red; font-size 设置文字的大小，如：font-size:12px; font-family 设置文字的字体，如：font

js左右无缝滚动

阅读更多关于 js左右无缝滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script> function getObject(objectId) { if(document.getElementById && document.getElementById(objectId)) { // W3C DOM return document.getElementById(objectId); } else if (document.all && document.all(objectId)) { // MSIE 4 DOM return document.all(objectId); } else if (document.layers && document.layers[objectId]) { // NN 4 DOM..

web基础2

阅读更多关于 web基础2

02-display属性–元素互相转换代码 < !DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Title < / title > < style > / * < ! - - 通常会去掉标签自带的内外边距， * 表示所有标签 - - > * / * { margin : 0 ; padding : 0 } . box01 { width : 100px ; height : 100px ; border : 1px solid red ; / * 1 . 把div转为行内块 * / display : inline - block ; / * 转为行内元素 * / / * display : inline ; * / font - size : 16px ; } / * 2 . 把span转为行内块 * / span { / * 转为行内块 * / display : inline - block ; / * 转为块元素 * / / * display : block ; * / / * 隐藏 * / / * display : none ; * / width : 100px ; height : 100px ; border : 1px solid red ;

CSS总结

阅读更多关于 CSS总结

CSS的简介： 1、CSS的定义：层叠样式表。属性和属性值用冒号分隔开，以分号结尾(这些符号都是英文的)。 2、CSS得引入方式：行内引入：<div style="这里写样式">我是一个块级的标签</div> 嵌入式：将CSS样式表放到head中用<style>标签包裹起来 <head> ... <style type="text/css"> ...此处写CSS样式 </style> </head> 导入式：将一个独立的.css文件引入HTML文件中，导入式使用@import 引入外部CSS文件，<style>标记也是写在<head>标记中。导入式会在整个网页装载完后再装载CSS文件。 <head> ... <style type="text/css"> @import "My.css"; 此处注意.css文件的路径 </style> </head> 链接式引入：将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中。链接式会以网页文件主体装载前装载CSS文件。 <head> ... <link href="My.css" rel="stylesheet" type="text/css"> </head> 3、样式的应用顺序：行内样式优先级最高针对相同的样式属性，不同的样式属性将以合并的方式呈现相同样式并且相同属性，呈现方式在

前端浏览器兼容问题

阅读更多关于前端浏览器兼容问题

前端浏览器兼容问题常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit IE浏览器：Trident内核，也称为IE内核 Chrome浏览器：Webkit内核，现在是Blink内核 Firefox浏览器：Gecko内核，俗称Firefox内核 Safari浏览器：Webkit内核 Opera浏览器：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核； 360浏览器：IE+Chrome双内核猎豹浏览器：IE+Chrome双内核百度浏览器：IE内核 QQ浏览器：Trident（兼容模式）+Webkit（高速模式）常见的兼容性问题：不同浏览器的标签默认的外补丁（margin）和内补丁（padding）不同解决方案：css里增加通配符*{margin：0；padding：0} IE6双边距问题；在IE6中设置了float，同时又设置margin，就会出现边距问题解决方案 :设置display：inline；当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度解决方案 :超出高度的标签设置overflow：hidden，或者设置line-height的值小于你的设置高度图片默认有间距解决方案：使用float为img布局 IE9以下浏览器不能使用opacity 解决方案：opacity：0.5

快速使用CSS 弹性盒子

阅读更多关于快速使用CSS 弹性盒子

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现；2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。弹性盒子是 CSS3 的一种新的布局模式，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 : CSS3 弹性盒子内容弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。 1：最基本的 <style> /*body { direction: rtl;/*设置 direction 属性为 rtl (right-to-left), 弹性子元素的排列方式也会改变，整体从右到左 }*/ .flex-container{ display: flex; display: -webkit-flex; width: 450px; height:

flexbox margin collapsing between children [duplicate]

阅读更多关于 flexbox margin collapsing between children [duplicate]

问题 This question already has answers here : Margin collapsing in flexbox (2 answers) Closed 2 years ago . 2 element inside a container with display:block margins collapse, but with display:flex is not working ! example .wrapper { width: 50%; margin: 0 auto; } .container { display: flex; // display: block; flex-flow: column nowrap; background-color: green; } h1 { background-color: #777; margin-bottom: 20px; } p { background-color: #ccc; margin-top: 15px; } 回答1: Margins does not collapse when one

CSS中强大的EM

阅读更多关于 CSS中强大的EM

使用CSS也好久了，但一直都是在使用“px”来设置Web元素的相关属性，未敢使用“em”。主要原因是，对其并不什么了解，只知道一点概念性的东西，前段时间在项目中要求使用“em”作为单位设置元素，所以从头对“em”学习了一回。稍为有一点理解，今天特意整理了一份博文与大家一起分享，希望对童子们有些许的帮助。这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何使用“em”对层进行弹性扩展？又是如何扩展文本和图像等内容？下在我们就一起带着这些问题开始今天的“em”之行。什么是弹性布局？用户的文字大小与弹性布局用户的浏览器默认渲染的文字大小是“16px”，换句话说，Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px”。当然，如果用户愿意他可以改变这种字体大小的设置，用户可以通过 UI控件来改变浏览器默认的字体大小。弹性设计有一个关键地方 Web页面中所有元素都使用“em”单位值。“em”是一个相对的大小，我们可以这样来设置 1em，0.5em，1.5em 等，而且“em”还可以指定到小数点后三位，比如“1.365em”。而其中“相对”的意思是：相对的计算必然会一个参考物，那么这里相对所指的是相对于元素父元素的 font-size 。比如说：如果在一个<div> 设置字体大小为“16px”，此时这个<div

订阅 margin