css的三大特性
-
概述
层叠(覆盖)性、继承性、优先级 -
层叠性
相同的选择器设置相同的属性但值不同时,离结构近的样式会覆盖离结构远的样式(就近原则)。相同选择器设置不同样式不会重叠覆盖。<style> div { font-size: 28px; color: yellow; } div { color: teal; /*该颜色样式会覆盖上面的颜色样式*/ } </style>
-
继承性
子标签会继承父标签的有关文字的(font- , text- , line- , color)样式。<head> <title>标题</title> <style> .nav { font-size: 28px; color: rgb(13, 102, 90); text-decoration: underline; } </style> </head> <body> <div class="nav"> <p>小盒子</p> /*p元素标签继承了,.nav的样式*/ </div> </body>
-
优先级
选择器是有优先级的,当两个不同选择器设置同一个元素的时候根据优先级应用样式。选择器 权重 继承或 * 0,0,0,0 元素选择器 0,0,0,1 类选择器,伪类选择器 0,0,1,0 ID选择器 0,1,0,0 行内样式 style="" 1,0,0,0 !important 最高级 注意:权重从左到右依次比较,权重可以叠加但是不会进位,所以类选择器永远大于元素选择器。
<head> <title>标题</title> <style> .nav { color: red; } p { color: #333!important; } </style> </head> <body> <p class="nav">小盒子</p> /*颜色为黑色,因为类选择器的权重高于元素选择器*/ </body>
权重叠加: 使用复合选择器时,权重会进行叠加。
<head> <title>标题</title> <style> p { color: #333!; } div p { color: red; } </style> </head> <body> <div> <p>小盒子</p> /* 小盒子的颜色是红色,因为该样式是复合标签设置的。权重为0,0,0,2 */ </div> </body>
盒子模型
-
概述
网页元素基本都是盒子,由边框、内外边距和实际内容组成。我们利用css进行布局和样式设置,再往盒子里面装内容。这也就是网页布局的本质。
-
盒子模型:边框 border
边框由宽度,颜色和类型样式组成。<style type="text/css"> p { border: #838bff 5px;/*边框颜色*/ border-style: solid;/*边框类型:solid实线、dashnd虚线、dotted点线*/ border-width: 20px; /*边框宽度*/ height: 100px; /*盒子设置一个高度*/ } /*复合写法 border: 边框宽度、类型、颜色; 无顺序要求 */ p { border: 5px #FFC0CB dotted; height: 100px; } /*设置单独一边的边框样式:border-bottom: 1px solid red*/ p { border-top: 5px solod antiquewhite; border-bottom: 5px dashed #333333; border-left: 3px dotted beige; border-right: 5px dotted #FFC0CB; } </style>
-
设置表格边框
单元格的边框不会重叠,可以使用合并单元格边框:border-collapse: collapse; ,来控制单元格边框。table, th, td { border: 3px solid #a181ff; border-collapse: collapse; /*合并相邻单元格边框*/ }
注意:边框会改变盒子的实际大小。原始盒子不变,增加了边框的宽度
-
内边距 padding
控制和子内容到边框之间的距离div { width: 100px; height: 100px; background-color: #FFC0CB; /* 设置内边距 */ padding-top: 10px; padding-bottom: 15px; padding-left: 20px; padding-right: 25px; }
复合写法
值的个数 描述 padding: 5px; 1个值,代表上下左右内边距5像素 padding:5px 10px; 2个值,代表上下内边距5像素 左右内边距10像素 padding: 5px 10px 20px; 3个值,代表上内边距5像素 左右内边距10像素 下内边距20像素 padding: 5px 10px 20px 30px; 4个值,上右下左内边距分别是5 10 20 30 像素(顺时针) div { width: 100px; height: 100px; background-color: #FFC0CB; /* 设置盒子内边距 */ padding: 5px; }
注意:内边距会改变盒子的实际大小。原始盒子不变,增加了盒子到边框的距离。但是,当标签宽度为父标签宽度时,设置内边距不会撑开盒子宽度(前提是不设置盒子宽度)。
-
外边距 margin
控制盒子与盒子之间的距离。p { height: 60px; border: 5px solid red; background-color: #33931e; padding: 20px; /*设置盒子外边距*/ margin-top: 10px; margin-bottom:10px; margin-left: 50px; margin-right: 100px; }
复合写法与内边距完全一样
p { height: 60px; border: 5px solid red; background-color: #33931e; padding: 20px; /*设置盒子外边距上下左右5像素*/ margin: 5px; }
-
外边距设置块级元素水平居中
盒子必须设置宽度,然后将左右外边距设置为autop { height: 60px; width: 400px; background-color: #33931e; /*设置盒子左右外边距auto*/ margin: 0 auto; }
-
行内/行内块元素设置水平居中
给行内/行内块元素添加 text-align: center; 属性<head> <style type="text/css"> div { text-align: center; } </style> </head> <body> <div> <a href="#">一</a> </div> </body>
-
相邻块元素垂直外边距合并问题
上下两个相邻的块元素,上面块设置下边距,下面块设置上边距,则他们之间的垂直间距为两者较大的值。相邻块元素垂直外边距取大值,建议只给一个盒子添加margin值<head> <style type="text/css"> div { width: 100px; height: 100px; background-color: #b2d5ff; } .nav1 { margin-bottom: 20px; } .nav2 { margin-top: 40px; } </style> </head> <body> <div class="nav1">1</div> <div class="nav2">2</div> </body>
-
嵌套块元素上边距不以父元素上边距为基准
当div1嵌套一个div2,设置div2的上边距需要先将div2与div1盒子分离,否则设置div2的上边距将会带着div1一起向下移动。解决方案:1.给父元素定义上边框,2.给父元素定义上内边距,3.添加overflow:hidden<head> <style type="text/css"> .fs { width: 200px; height: 200px; background-color: antiquewhite; margin-top: 50px; /* border-top: 1px solid transparent; */ /* padding-top: 1px; */ /*overflow: hidden; /*推荐使用,不改变盒子大小*/ } .sn { width: 100px; height: 100px; background-color: #ffd8f8; margin-top: 100px; } </style> </head> <body> <div class="fs"> <div class="sn"></div> </div> </body>
-
布局前先清除内外边距
注意:行内元素为了考虑兼容性,尽量只设置左右内外边距,不设置下上内外边距。如果确实需要就转为行内块元素。* { padding: 0px; margin: 0px; }
-
去掉 li 前面的项目符号(小圆点)
li { list-style: none; }
圆角边框
- 概述
给盒子设置圆角边框,border-radius: 半径;。半径为圆,以圆切角,div { width: 300px; height: 120px; background-color: #395d93; margin: 100px auto; border-radius: 60px;/* 设置圆角边框*/ /* border-radius: 50%; */ border-radius: 60px 70px 80px 90px;/*左上角开始顺时针分别设置圆角 */ border-top-left-radius: 50px;/*单独设置一个角*/ }
盒子阴影
- 设置盒子阴影,box-shadow: X Y 模糊 大小 颜色 内外;
div { width: 300px; height: 120px; background-color: #395d93; margin: 100px auto; /*设置盒子阴影*/ box-shadow: 3px 5px 10px 3px #666666; } /*鼠标经过有阴影*/ div:hover { box-shadow: 3px 5px 10px 3px #666666; }
文字阴影
p {
/* X Y 模糊 颜色 */
text-shadow: 5px 5px 3px #FFC0CB;
}