导图社区 CSS基础知识点总结
- 109
- 2
- 0
- 举报
CSS基础知识点总结
CSS基础知识点总结，主要包括：CSS引入方式、CSS选择器、CSS属性、操作总结、注意。
编辑于2022-05-15 14:50:16- css
- CSS基础
- 相似推荐
- 大纲
CSS基础知识点总结
CSS引入方式
1.行内式
行内式结构
```css <p style="color:red;font-size:40px">hello</p> ```
2.嵌入式
嵌入式结构
```css <style> p{ color:green; background:yellow; } </style> ```
优缺点
优点: 引入数目没有限制
缺点: 只能应用于本页面，不能应用于其他页面
3.链接式(推荐使用)
<link rel="stylesheet" href="index.css">
可以用于多个页面，将css格式用于多个页面
4.导入式
<style><br> @import "test_css.css"<br></style>
页面加载顺序:先加载下面的内容，再加载CSS的样式 缺点:引入的数目是有限制的
CSS选择器
一、基础选择器
1.同一个标签的id属性和class属性可以同时设置 2.如何同时设置多个id和class属性 ```css <div po='p1' class='c1 btn'>p1</div> <div po='p1 p' id='div1 div_last'>p1</div> ```
标签选择器
```css p{color:green;} ```
class选择器
```css .box{background-color:red;} ```
id选择器
```css #div1{font-size:15px;} ```
通配选择器
```css *{margin:0;padding:0} ```
二、组合选择器
多元素选择器
E,F
多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 ```css div,p { color:#f00; } ```
子代选择器
E>F
子元素选择器，匹配所有E元素的子元素F: ```css div>p { color:#f00; } ```
后代选择器
E F
后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 : ```css li a { font-weight:bold;｝ ```
毗邻选择器
E+F
毗邻元素选择器，向下紧挨着，匹配所有紧随E元素之后的同级元素F,最靠近E的F, 只能向下找，不会向上找 : ```css div+p { color:#f00; } ```
兄弟选择器
E~F
普通兄弟选择器,向下查找同级（以破折号分隔） : ```css .div1~p{font-size: 30px; } ```
三、属性选择器
这里的E指元素，Elements，可以使标签选择器，也可以是id选择器或者class选择器
E[attr]
匹配所有具有att属性的E元素，不考虑它的值。 * 注意：E在此处可以省略 比如“[cheacked]”。以下同。） ```css p[title] { color:#f00; } ```
E[att=val]
匹配所有att属性等于“val”的E元素 * 注意:只适用于属性单值和如果多值，需要全部写入(但是没有意义) ```css div[class=”error”] { color:#f00; } ```
E[att~=val]
匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素，属性存在多个值，必须加上~，不然无法渲染 ```css td[class~=”name”]{ color:#f00; } ```
E[att^=val]
匹配属性值以指定值开头的每个元素 ```css div[class^="test"]{background:#ffff00;} ```
E[att$=val]
匹配属性值以指定值结尾的每个元素 ```css div[class$="test"]{background:#ffff00;} ```
E[att*=val]
匹配属性值中包含指定值的元素，对于属性多个值也适用。 ```css div[class*="test"]{background:#ffff00;} ```
四、伪类选择器
* 伪类指的是标签的不同状态: * a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
anchor伪类
a:link
（没有接触过的链接）,用于定义了链接的常规状态。
a:hover
（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited
（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active
（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
before after伪类选择器
E:before
在E内容最前面插入内容 ```css p:before{ content:"hello"; color:red } ```
E:after
在E元素内容的最后面加入内容 ```css p:after{ content:"hi"; font-size:15px; } ```
选择器优先级
css的继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。 继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。 例如一个BODY定义了的颜色值也会应用到段落的文本中。 这段文字都继承了由body {color:red;}样式定义的颜色。 然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
css的优先级(重点)
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。 样式表中的特殊性描述了不同规则的相对权重，它的基本规则如右： 按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
标签:1
统计选择符中的HTML标签名个数。
class:10
统计选择符中的CLASS属性个数。
id:100
统计选择符中的ID属性个数。
style:1000
内联样式表的权值最高
!important
* 有!important声明的规则高于一切。 * 如果!important声明冲突，则比较优先权。 * 如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。 * 注意!important的书写 ```css .p2{ color:red!important; } ```
总结
1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。 2、有!important声明的规则高于一切。 3、如果!important声明冲突，则比较优先权。 4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。 5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
CSS属性操作
文本属性:text
文本颜色:color
颜色属性被用来设置文字的颜色。
16进制值
可百度颜色代码 ```css p{ color:＃FF0000; } ```
RGB(0-255,0-255,0-255,0-1)
其中0-1:代表透明度,1是纯的颜色，默认为1 ```css p{color:rgba(255,0,0,0.3)} ```
opacity:透明度
语法:opacity: value|inherit; * value 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明） * inherit 应该从父元素继承 opacity 属性的值。
水平对齐方式:text-align
text-align 属性规定元素中的文本的水平对齐方式。 * 注意是文本，而不是图片。
left:左对齐，默认左对齐
right:右对齐
center:居中对齐
justify:两端对齐
一般是大的段落需要用到两端对齐。
垂直对齐方式:vertical-align
设置元素内容的垂直对齐方式 * 注意:只对行内元素有效，对块级元素无效 ```css p{vertical-align:－4px} ```
baseline:默认。元素放置在父元素的基线上。
sub:垂直对齐文本的下标。
super:垂直对齐文本的上标
top:把元素的顶端与行中最高元素的顶端对齐
text-top:把元素的顶端与父元素字体的顶端对齐<br>
middle: 把此元素放置在父元素的中部。
bottom:把元素的顶端与行中最低的元素的顶端对齐。
text-bottom:把元素的底端与父元素字体的底端对齐。
%:使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit:规定应该从父元素继承 vertical-align 属性的值。
文本行高:line-height
* 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%: * 基于字体大小的百分比, 超出部分:overflow:scroll;(重点)，行高设定，内容超出，直接写下面一行。 * 内容的大小是固定的，行高其余的都是空隙，如果line-height=height，只能写一行，第二行会溢出。 ```css p{line-height: 200px; } ```
文本下划线:text-decoration
none:默认。定义标准的文本
underline:定义文本下的一条线。
overline:定义文本上的一条线。
line-through:定义穿过文本下的一条线。
blink:定义闪烁的文本。
inherit:规定应该从父元素继承 text-decoration 属性的值。
字体样式:font-family
字体加粗:font-weight
也可以用整百数字来表示: 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 100 200 300 400 500 600 700 800 900
normal:默认值。定义标准的字符。
bold:定义粗体字符。
bolder:定义更粗的字符。
lighter:定义更细的字符。
inherit:规定应该从父类元素继承font-weight属性的值
字体倾斜:font-style
normal:默认值。浏览器显示一个标准的字体样式。
italic/oblique:字体倾斜的样式
inherit:规定应该从父元素继承字体样式。
文本缩进:text-indent
**定义** text-indent 属性规定文本块中首行文本的缩进。 * 注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。 * 注意：在 CSS 2.1 之前，text-indent 总是继承计算值，而不是声明值。 ```css p { text-indent:50px; } ```
字母间距:letter-spacing
**定义和用法** letter-spacing 属性增加或减少每个字符间的空白（字符间距）。 该属性定义了在文本字符框之间插入多少空间。 由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。 ```css h1 {letter-spacing:2px} h2 {letter-spacing:-3px} ```
单词间距:word-spacing
**定义** word-spacing 属性增加或减少单词间的空白（即字间隔）。 该属性定义元素中单词之间插入多少空白符。 针对这个属性，“字” 定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔；所以，normal 就等同于设置为 0。 允许指定负长度值，这会让字之间挤得更紧。 * 注释：允许使用负值。 ```css p { word-spacing:25px; } ``` **注意word-spacing 和 letter-spacing的区别** letter-spacing为每个字符之间的空白距离 word-spacing为单词之间的空白距离，
文本转换:text-transform
```css h1 {text-transform:uppercase} h2 {text-transform:capitalize} p {text-transform:lowercase} ```
none:默认。定义带有小写字母和大写字母的标准的文本。
capitalize:文本中的每个单词以大写字母开头。
uppercase:定义仅有大写字母。
lowercase:定义无大写字母，仅有小写字母。
inherit:规定应该从父元素继承 text-transform 属性的值。
背景属性:background
background-image
url('URL') :指向图像的路径。
background-color
background-repeat:规定如何重复背景图像。
默认地，背景图像在水平和垂直方向上重复。
repeat: 默认。背景图像将在垂直方向和水平方向重复。
repeat-x:背景图像将在水平方向重复。
repeat-y:背景图像将在垂直方向重复。
no-repeat:背景图像将仅显示一次。
inherit
background-position:设置背景图像的起始位置。
* 这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。 * 提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。 默认值： 0% 0% 继承性： no 版本： CSS1 JavaScript 语法： object.style.backgroundPosition="center"
top left
top left top center top right center left center center center right bottom left bottom center bottom right 如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0% 0%。
x% y%
x% y% 第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。
xpos ypos
xpos ypos 第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值，另一个值将是50%。 您可以混合使用 % 和 position 值。 ```css body { background-image:url('bgimage.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } ```
background-size:属性规定背景图像的尺寸
默认值： auto 继承性： no 版本： CSS3 JavaScript 语法： object.style.backgroundSize="60px 80px" **语法** ```css background-size: length|percentage|cover|contain; ```
length
* length 设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。
percentage
* percentage 以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。
cover
* cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。
contain
* contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 **cover和contain的区别** 不同之处在于： * 在no-repeat情况下，如果容器宽高比与图片宽高比不同， cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉； contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域； PS:其实，从英文的意思来说： cover意味着“遮罩、遮盖”---此处理解为“塞满”较恰当， contain意为“包含”--也就是：我图片虽然缩放了，但是整个图是被“包含”在你里面的，你必须把我显示完整、不能裁剪我一丝一毫~ * 在repeat情况下：cover:与上述相同；contain:容器内至少有一张完整的图，容器留白区域则平铺背景图，铺不下的再裁掉。
简写:background:#ffffff url('1.png') no-repeat right top;
列表属性:list-style
**定义和用法** list-style 简写属性在一个声明中设置所有的列表属性。 **说明** 该属性是一个简写属性，涵盖了所有其他列表样式属性。 由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。
list-style-type:设置列表项标记的类型。
none
circle:空心圆
disc:实心圆
square:实心方块
decimal:标记的是数字
lower-roman:小罗马数字
upper-roman:大罗马数字
lower-alpha:小写英文字母
upper-alpha:大写英文字母
list-style-position:设置在何处放置列表项标记
**定义和用法** list-style-position 属性设置在何处放置列表项标记。 **说明** 该属性用于声明列表标志相对于列表项内容的位置。 外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。
inside:列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside:默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
list-style-image:使用图像来替换列表项的标记
URL:图像的路径
none:默认。无图形被显示。
显示属性:display
block:此元素将显示为块级元素
设置了display:block;之后，元素会独占一行 **注意：**一个内联元素设置为display:block是不允许有它内部的嵌套块元素。
inline:默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block:行内块元素。
inline-block的块之间默认会有缝隙，缝隙如果不想要的话，先把他们放在大的盒子里，然后设置word-spacing为负数，但是大的盒子也应该是inline-block, 也可以用margin来设置; 直接用 ```css *{margin:0,padding:0} ``` 能设置成功。
list-item:此元素会作为列表显示。
table:此元素会作为块级表格来显示（类似 ），表格前后带有换行符。
设置了display:table;之后，元素会独占一行
inline-table:此元素会作为内联表格来显示（类似 ），表格前后没有换行符。
none:隐藏该元素，不显示
**dispaly:none; 与 visibility:hidden; 的区别** visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
盒模型
边框属性:border
* 如何设置只有三个边框? border-style: solid; border-color: chartreuse; border-width: 20px; border-bottom:none; border-right:none; * 边框也分为四个方向，上下左右
border-width
border-style
border-color
简写: border:5px solid red;
外边距:margin
用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 **注意** margin上下边距冲突取较大的外边距，但是左右相遇不会融合 块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。 注释：允许使用负值。
margin:10px
所有 4 个外边距都是 10px
margin:10px 20px
上外边距和下外边距是 10px 右外边距和左外边距是 5px
margin:10px 20px 30px
上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px
margin:10px 20px 30px 40px
上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px
margin:0 auto;
居中应用
填充:padding
**定义** 用于控制内容与边框之间的距离定义和用法 padding 简写属性在一个声明中设置所有内边距属性。 **说明** 这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。 **注释：**不允许使用负值。
思考
思考问题1
### 思考1:body的外边距 边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下， body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了，为了验证这一点，加上： body{ border: 1px solid; background-color: cadetblue; } **解决方法：** body{ margin: 0; }
思考问题2
### 思考2：margin collapse（边界塌陷或者说边界重叠) * 上述情况只针对上下，对左右没有影响。 **1、兄弟div：** 上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值 **2、父子div：** 如果父级div中没有border，padding，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin； **解决方法：** * 1.给父盒子加overflow: hidden; * 2.给父盒子加border或者padding，但是会影响到原始的布局 * 3.给父盒子加属性:inlinecontent:"";
浮动属性:float
浮动问题
浮动规则
元素分类
block元素
* block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。 * block元素可以设置width、height、margin、padding属性； * 常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
inline元素
* inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。 * inline元素设置width、height属性无效 * 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
inline-block元素
* inline-block元素结合了inline和block两者的特性于一身，简单的说：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。 **inline-block的默认情况** * 默认情况下，inline元素之间就有空隙出现，所以结合了inline和block属性的inline-block属性自然也有这个特点。 * 那这些空隙是什么呢，它们是空白符！ **如何消除空白符？** * 1 调整font-size:0px;(针对父盒子调整) * 2.word-spacing属性调整为负数(针对父盒子调整)
文档流
* 所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。 * 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。 * 假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。 * 此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。 浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。
浮动规则
浮动元素到底往哪里浮，取决于上一个元素按什么排，如果在文档流，保持垂直，如果浮动，则贴着走。
定位属性:position
static
默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
relative
**relative: 相对定位** * 相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。 * 有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。 * 对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 * 1.参照物是该元素在文档流中的原始位置 * 2.元素不脱离文档流(之前的空间位置依然存在) **注意：**position：relative的一个主要用法：方便绝对定位元素找到参照物。
absolute
**定义** * 设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。 * 元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 **重点** * 如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。 * 另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 * 1.absolute会脱离文档流 * 2.父元素:position:relative 子元素:position:absolute;
fixed
* fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 * 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。 * 这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。 * 在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
总结
脱离文档流的操作
float
position:fixed/absolute;
区别
* 使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。 * 而对于使用absolute :position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
居中总结1
margin:auto;
* 具体来说就是把要居中的元素的margin-left和margin-right都设为auto， * 此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。
text-align:center
* 只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。 * 但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。
使用line-height让单行的文字垂直居中
* 把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。
使用表格
* 如果你使用的是表格的话，那完全不用为各种居中问题而烦恼了，只要用到 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。 * 如果想在css中控制表格内容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text- align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用，对块状元素无效。
使用display:table-cell来居中
* 对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中特性了。 * 例如：（针对父盒子） ```css div{ display:table-cell; vertical-align:middle; text-align:center; width:200px; height:200px; } ``` * 但是，这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效。
使用绝对定位来进行居中
* 此法只适用于那些我们已经知道它们的宽度或高度的元素。 * 绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。 ```css *{margin:0;padding:0} .parent{ width:200px; height:200px; position:relative; border:1px solid red; } .child{ width:100px; height:120px; position:absolute; top:50%; left:50%; margin-left:-50px; /*负的元素的宽度的一半: 100/2=50*/ margin-top:-60px; /*负的元素高度的一半: 120/2=60*/ } ```
另一种使用绝对定位来居中的方法
* 此法同样只适用于那些我们已经知道它们的宽度或高度的元素，并且遗憾的是它只支持IE9+,谷歌，火狐等符合w3c标准的现代浏览器。 * 下面用一段代码来了解这种方法： ```css *{margin:0;padding:0} .parent{ width:200px; height:200px; position:relative; border:1px solid red; } .child{ width:100px; height:120px; position:absolute; left:0;/*left与right必须配对出现来控制水平方向*/ right:0; top:0;/*top与bottom必须配对出现来控制垂直方向*/ bottom:0; margin: auto;/*这句也是必不可少的*/ } ```
使用浮动配合相对定位来进行水平居中
* 此方法也是关于浮动元素怎么水平居中的解决方法，并且我们不需要知道需要居中的元素的宽度。 * 浮动居中的原理是：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少。 这种使用浮动配合相对定位来居中的方法， * 优点是不用知道要居中的元素的宽度，即使这个宽度是不断变化的也行 * 缺点是需要一个多余的元素来包裹要居中的元素。 ```css *{margin:0;padding:0} .parent{ width:200px; height:200px; position:relative; } .wraper{/*浮动居中的方法需要有这么一个包裹的元素，需要浮动的就是这个元素*/ float:left;/*在这个包裹元素上进行浮动，让他自适应内容的宽度*/ position:relative; left:50%;/*相对定位到父元素宽度一般的地方*/ clear:both; } .child{/*这个才是真正的需要居中的元素*/ border:1px solid blue; position:relative;/*在这个元素上进行相对定位*/ left:-50%;/*向左偏移本身的一半宽度，整好就居中了*/ white-space:nowrap;/*属性设置如何处理元素内的空白。nowrap文本不会换行，文本会在同一行继续，直到遇到<br>为止*/ } ```
利用font-size来实现垂直居中
* 如果父元素高度是已知的，要把它里面的子元素进行水平垂直居中，则可以使用这种方法，且子元素的宽度或高度都不必知道。 * 该方法只对IE6和IE7有效。 * 该方法的要点是给父元素设一个合适的font-size的值，这个值的取值为该父元素的高度除以1.14得到的值，并且子元素必须 是一个inline或inline-block元素，需要加上vertical-align:middle属性。 * 至于为什么是除以1.14而不是其他的数，还真没有人知道，你只需要记住1.14这个数就行了。 ```css *{margin:0;padding:0} .parent{ font-size:175.4px;/*fontsize这个值为这个元素的高度除以1.14得到的结果*/ width:200px; height:200px;/*有一个固定的高度才能计算fontsize*/ position:relative; } .child{ vertical-align:middle;/*这句话是必须的*/ zoom:1; display:inline;/*在ie67中让该元素变成一个inline-block元素，如果该元素本身就是一个inline或inline-block元素*/ font-size:12px;/*让子元素恢复成正常的font-size*/ } ``` * 在方法5中说过在IE8+、火狐谷歌等现在浏览器中可以用display:table-cell来进行居中，而这里的font-size的方法则适用于IE6和IE7，所以把这两种方法结合起来就能兼容所有浏览器了： *
居中总结2
水平居中
行内元素
行内元素（主要是表现为文字，图片等行内元素），通过在父级元素设置 text-align:center 使子级行内元素居中。
定宽块级元素
为定宽块级元素设置： ```css margin-left:auto; margin-right:auto; ```
不定宽块级元素
1.加入 table 标签<br>
* 将元素用 table 标签包裹起来，包括 tbody、tr、td，但这种方法为了居中增加了无语义的标签。 ### HTML ```html <div> <table> <tbody> <tr> <td> <ul> <li><a href="#">我是要</a></li> <li><a href="#">居中的</a></li> <li><a href="#">ul标签</a></li> </ul> </td> </tr> </tbody> </table> </div> ``` ### CSS ```css table{ margin:0 auto; } ul{list-style:none;margin:0;padding:0;} li{float:left;margin-right:8px;} ```
2.设置 display:inline 方法<br>
* 设置为 inline 行内元素后沿用行内元素居中的方法，这种方法改变了元素的 display 样式。 ### HTML ```html <div> <ul> <li><a href="#">我是要</a></li> <li><a href="#">居中的</a></li> <li><a href="#">ul标签</a></li> </ul> </div> ``` ### CSS ```css div{ text-align:center; } ul{ list-style:none; margin:0; padding:0; display:inline;} li{margin-right:8px;display:inline;} ```
3.设置 position:relative 和 left:50%
* 通过给父元素设置 float/display:inline-block（IE7对块级元素设置 inline-block 支持性不好，需要 hack，即 *display:inline;*zoom:1;）， * 然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。 ### HTML ```html <div> <ul> <li><a href="#">我是要</a></li> <li><a href="#">居中的</a></li> <li><a href="#">ul标签</a></li> </ul> </div> ``` ### CSS ```css div{ display: inline-block; /*兼容IE6，IE7*/ *display: inline; *zoom:1; position:relative; left:50% } ul{ /*兼容IE6*/ _display: inline; _zoom:1; list-style:none; margin:0; padding:0; position:relative; left:-50%; } li{ float:left; margin-right:8px; } ```
注意
### 注： * 1、_display:inline 其实是触发IE6中块级元素表现出 inline-block 的效果，_zoom:1 触发IE6中 hasLayout 效果，这里其他浏览器不需要触发 inline-block 效果，原因不是很清楚； * 2、其中display：inline-block 也可以替换为 float ，float的主要作用就是产生 inline-block 的效果，这样代码会更加简洁一些，不用考虑太多的兼容问题： ```CSS div{ float: left; position:relative; left:50% } ul{ /*兼容IE6*/ _float:left; list-style:none; margin:0; padding:0; position:relative; left:-50%; } li{ float:left; margin-right:8px; } ```
垂直居中
* 垂直居中主要是行内元素的居中比较麻烦，特别是多行文本的居中。
父元素高度确定的行内元素（单行文本）
* 通过设置父元素的 height 和 line-height 高度一致来实现的。
高度固定的块级元素垂直居中
1.垂直居中元素设置 absolute，利用 absolute 元素居中的方法来居中
* 其实这个方法是 absolute 元素居中的方法，父元素设置 position:relative，垂直居中元素设置 position:absolute， * 当要垂直居中时，设置 top:0;bottom:0，然后为上下 margin 设置 auto，水平居中也是同理。IE6，IE7不支持此种居中方法。 * 这种方法适用于原本就设置了 position 为 absolute 的元素。 ### HTML ``` <div class="wrap"> <div class="container"> <p>我是想要垂直居中的块级元素。</p> </div> </div> ``` ### CSS ``` .wrap{ width:200px; height: 200px; background:#ccc; position: relative; } .container{ width: 100px; height:100px; background: #00ff00; position:absolute; right: 0; left:0; top:0; bottom:0; margin:auto; } ```
2.垂直居中元素设置 absolute，通过 top 和 margin-top 属性来调整；
* 父元素设置 position:relative，需要垂直居中的元素设置： ``` position:absolute; top:50%; height:2Hpx; margin-top:-Hpx; ``` * 这里 top改为 bottom，margin-top 改为 margin-bottom 效果一样，这种方法适用于原本设置了 position 为 absolute 的元素。 ### HTML ``` <div class="wrap"> <div class="container"> <p>我是想要垂直居中的块级元素。</p> </div> </div> ``` ### CSS ``` .wrap{ width:100px; height: 200px; background:#ccc; position: relative; } .container{ position:absolute; top:50%; height:100px; margin-top:-50px; /* 高度的一半 */ background: #00ff00; } ```
3.创建浮动元素；
* 在需要垂直居中的元素前创建浮动元素， * 浮动元素设置 margin-bottom 为垂直居中元素高度的一半，高度为父元素高度的一半， * 为了兼容IE6、IE7，还需要象征性地设置一下 width。垂直居中元素 清除浮动。但是这个方法创建了无语义的标签，还要做一些兼容性的处理。 ### HTML ``` <div class="wrap"> <div class="floatdiv"></div> <div class="container"> <p>我是想要垂直居中的块级元素。</p> </div> </div> ``` ### CSS ``` .wrap{ width: 100px; height: 200px; background: #ccc; } .floatdiv { *width: 1px;/*兼容IE6、IE7*/ float:left; height:50%; margin-bottom:-50px; } .container { clear:both; height:100px; position:relative; background: #00ff00; } ```
父元素高度确定的行内元素（多行文本、图片）、块状元素
1.加入table标签；
* 使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。 ### HTML ``` <table> <tbody> <tr> <td class="wrap"> <div> <p>我是想要垂直居中的一段文字。</p> </div> </td> </tr> </tbody> </table> ``` ### CSS ``` .wrap{ width:100px; height:200px; background:#ccc } ``` ### 注意 * 1、因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了； * 2、将 div 换为 img 效果一致。
2.设置 display 为 table-cell，激活 vertical-align 属性。
* 在 chrome、Firefox 、opera、IE8 及以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。 ### HTML ``` <div> <p>我是想要垂直居中的一段文字。</p> </div> ``` ### CSS ``` div{ width:100px; height:200px; background:#ccc; display:table-cell; vertical-align:middle; } ```
注意
1、默认的高度和宽度问题
（1）父子都是块级元素
```html <!DOCTYPE html> <html> <head> <title>fortest</title> <style> div.parent{ width: 500px; height: 300px; background: #ccc; } div.son{ width: 100%; height: 200px; background: green; } </style> </head> <body> <div class="parent"> <div class="son"></div> </div> </body> </html> ``` * 这时，子元素设置为了父元素width的100%，那么子元素的宽度也是500px； * 但是如果我们把子元素的width去掉之后，就会发现子元素还是等于父元素的width。也就是说，对于块级元素，子元素的宽度默认为父元素的100%。 **当我们给子元素添加padding和margin时，可以发现宽度width是父元素的宽度减去子元素的margin值和padding值。** * 毫无疑问，如果去掉子元素的height，就会发先子元素的高度为0，故height是不会为100%的，一般我们都是通过添加内容（子元素）将父元素撑起来。
（2）父：块级元素 子：内联元素
* 如果内联元素是不可替换元素（除img，input以外的一般元素），元素是没有办法设置宽度的，也就谈不上100%的问题了。 即内联元素必须依靠其内部的内容才能撑开。 * 如果内联元素是可替换元素（img，input，本身可以设置长和宽），**不管怎么设置父元素的宽度和高度，而不设置img的宽和高时，img总是表现为其原始的宽和高。** ``` <!DOCTYPE html> <html> <head> <title>...</title> <style> div.parent{ width: 500px; height: 300px; background: #ccc; } img{ height: 100px; background: green; } </style> </head> <body> <div class="parent"> <img class="son" src="s1.jpg"></img> </div> </body> </html> ``` * 由此我们可以发现，虽然没有设置宽度，但是表现在浏览器上为160px，它并没有继承父元素的100%得到500px，而是根据既定的高度来等比例缩小宽度。 * 同样， 如果只设置width，那么height也会等比例改变。如果我们把img的width设置为100%，就可以发现其宽度这时就和父元素的宽度一致了。 * 而我们一般的做法时，**首先确定img的父元素的宽度和高度，然后再将img的宽度和高度设置位100%，这样，图片就能铺满父元素了。**