CSS——important和盒模型
2017-09-14 18:44
127 查看
important标记
这时候是绿色，但是如果CSS中的p标签变成：
则结果便是红色。
因为通过k:v!important;来给一个属性提高权重，这个属性的权重就是无穷大。
注意语法
正确的：font-size:60px !important;
错误的：
font-size:60px; !important;
font-size:60px important;
需要注意的是：
1.important提升的是一个属性，而不是一个选择器：
只针对颜色写了important，所以就字体颜色属性提升权重；字号属性没有写，所以就没有提升权重。综合来看，字体颜色是red（听important的），字号是50px（听id的）。
2.important无法提升继承的权重，该是0还是0：
比如html结构：
其CSS样式：
最后字体还是蓝色。
因为div是通过继承性来影响文字颜色的，所以!important无法提升它的权重，权重依然是0。p标签是选中了，所以字是蓝色的，要以p为准。
3.!important不影响就近原则：
div选择器没有直接用于最内层标签，没有直接选择上文字所在标签，所以是通过继承性来影响文字颜色，所以权重为0。important无法提升权重是0的选择器，此时没有打破就近原则。由于ul比div近，所以以ul为准。
一般情况下不使用important，因为会让CSS很乱。
权重计算的总结：
1. 被选中了→比权重→权重不同的话谁大就听谁的，权重相同的话哪个编辑器写在后面就听那个的。
2. 没被选中→就近原则：谁描述的近听谁的→如果一样近，比权重→如果权重不同，谁的权重大就听谁的，如果权重相同，谁写在后面就听谁的。
盒模型
width：内容的宽度，不是盒子的宽度
height：内容的高度，不是盒子的高度
padding：内边距
border：边框
margin：外边距
这个盒子width:200px; height:200px; 但真实占有的宽高是302*302，因为还有padding、border。宽度和真实占有的宽度不是一个概念。
下面两个盒子的真实占有宽高完全相同，都是302*302：
如果想保持一个盒子的真实占有宽度不变，那么加width就要减padding，加padding就要减width。
padding就是内边距，padding的区域有背景颜色，CSS2.1前提下，并且背景颜色一定和内容区域的相同，也就是说，background-color将填充所有border以内的区域。
有四个方向，padding-top，padding-right，padding-bottom，padding-left。
如果不写padding-left，那就是没有左内边距。
快捷键是pdt、pdr、pdb、pdl然后按tab。
综合属性：
如果写了四个值，则padding: 30px 20px 40px 100px; 即上、右、下、左。
如果只写了3个值，则padding: 20px 30px 40px; 即上、右、下。没有左，说明左和右是一样的。
如果只写了2个值，则padding: 30px 40px;即上、右。没有下，说明和上一样；没有左，说明和右一样。等价于padding: 30px 40px 30px 40px。
以上是小属性层叠大属性，也就等价于padding: 20px 20px 20px 30px。
但是不能把小属性写在大属性前面（如下）：
题目1，说出下面盒子真实占有宽高：
真实占有宽度=200+20+40+1+1
题目2，说出下面盒子真实占有宽高：
padding-left: 10px; 和padding-right: 20px; 没用，因为后面的padding大属性会层叠掉他们。
一些元素默认带有padding，比如ul标签。
在做网站的时候，为了便于控制，总是喜欢清除默认padding：
*的效率不高，所以我们使用并集选择器，罗列所有标签：
border
边框。三个要素：粗细、线型、颜色。
颜色如果不写，默认是黑色。如果另外两个属性不写，则显示不出来边框。
所有线型：
a dotted border /a dashed border /a solid border /a double border /a groove border /a ridge border /an inset border /an outset border
比如border: 10px ridge red; 在chrome和firefox、IE中会有细微差别。
border是一个大综合属性，
border: 1px solid red; 就是把4个边框都设置为1px宽度、线型实线、red颜色。
border属性能够被拆开，有两种方式：
1）按3要素: border-width、border-style、border-color
border-width: 10px; →边框宽度
border-style: solid; →线型
border-color: red; →颜色
等价于border: 10px solid red;
如果某一个小要素后面是空格隔开的多个值，那么就是上右下左的顺序：
2）按方向: border-top、border-right、border-bottom、border-left
等价于border: 10px solid red;
可以没有border→border: none;
某一条边没有→border-left: none;
也可以调整左边边框的宽度为0→border-left-width: 0;
用border制作一个三角形：
<style type="text/css">
p{
color:red;
}
#para1{
color:blue;
}
.spec{
color:green !important;
}
</style>
</head>
<body>
<p id="para1" class="spec">我就想是绿色</p>
</body>这时候是绿色，但是如果CSS中的p标签变成：
p{
color:red !important;
font-size:100px;
}则结果便是红色。
因为通过k:v!important;来给一个属性提高权重，这个属性的权重就是无穷大。
注意语法
正确的：font-size:60px !important;
错误的：
font-size:60px; !important;
font-size:60px important;
需要注意的是：
1.important提升的是一个属性，而不是一个选择器：
<style type="text/css">
p{
color:red !important;
font-size:100px;
}
#para1{
color:blue;
font-size:50px;
}
.spec{
color:green;
font-size:20px;
}
</style>只针对颜色写了important，所以就字体颜色属性提升权重；字号属性没有写，所以就没有提升权重。综合来看，字体颜色是red（听important的），字号是50px（听id的）。
2.important无法提升继承的权重，该是0还是0：
比如html结构：
<div> <p>哈哈哈哈哈哈</p> </div>
其CSS样式：
div{
color:red !important;
}
p{
color:blue;
}最后字体还是蓝色。
因为div是通过继承性来影响文字颜色的，所以!important无法提升它的权重，权重依然是0。p标签是选中了，所以字是蓝色的，要以p为准。
3.!important不影响就近原则：
<style type="text/css">
div{
color:red !important;
}
ul{
color:green;
}
</style>
</head>
<body>
<div>
<ul>
<li>猜猜我是什么颜色</li>
</ul>
</div>
</body>div选择器没有直接用于最内层标签，没有直接选择上文字所在标签，所以是通过继承性来影响文字颜色，所以权重为0。important无法提升权重是0的选择器，此时没有打破就近原则。由于ul比div近，所以以ul为准。
一般情况下不使用important，因为会让CSS很乱。
权重计算的总结：
1. 被选中了→比权重→权重不同的话谁大就听谁的，权重相同的话哪个编辑器写在后面就听那个的。
2. 没被选中→就近原则：谁描述的近听谁的→如果一样近，比权重→如果权重不同，谁的权重大就听谁的，如果权重相同，谁写在后面就听谁的。
盒模型
width：内容的宽度，不是盒子的宽度
height：内容的高度，不是盒子的高度
padding：内边距
border：边框
margin：外边距
<style type="text/css">
div{
width: 200px;
height: 200px;
border:1px solid red;
padding: 50px;
}
</style>这个盒子width:200px; height:200px; 但真实占有的宽高是302*302，因为还有padding、border。宽度和真实占有的宽度不是一个概念。
下面两个盒子的真实占有宽高完全相同，都是302*302：
.box1{
width:100px;
height:100px;
padding:100px;
border:1px solid red;
}
.box2{
width:250px;
height:250px;
padding:25px;
border:1px solid red;
}如果想保持一个盒子的真实占有宽度不变，那么加width就要减padding，加padding就要减width。
padding就是内边距，padding的区域有背景颜色，CSS2.1前提下，并且背景颜色一定和内容区域的相同，也就是说，background-color将填充所有border以内的区域。
有四个方向，padding-top，padding-right，padding-bottom，padding-left。
如果不写padding-left，那就是没有左内边距。
快捷键是pdt、pdr、pdb、pdl然后按tab。
综合属性：
如果写了四个值，则padding: 30px 20px 40px 100px; 即上、右、下、左。
如果只写了3个值，则padding: 20px 30px 40px; 即上、右、下。没有左，说明左和右是一样的。
如果只写了2个值，则padding: 30px 40px;即上、右。没有下，说明和上一样；没有左，说明和右一样。等价于padding: 30px 40px 30px 40px。
div{
padding: 20px;
padding-left: 30px;
}以上是小属性层叠大属性，也就等价于padding: 20px 20px 20px 30px。
但是不能把小属性写在大属性前面（如下）：
div{
padding-left: 30px;
padding: 20px;
}题目1，说出下面盒子真实占有宽高：
div{
width: 200px;
height: 200px;
padding: 10px 20px 30px;
padding-right: 40px;
border: 1px solid #000;
}真实占有宽度=200+20+40+1+1
题目2，说出下面盒子真实占有宽高：
div{
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 20px;
padding: 40px 50px 60px;
padding-bottom: 30px;
border: 1px solid #000;
}<
a6db
/span>padding-left: 10px; 和padding-right: 20px; 没用，因为后面的padding大属性会层叠掉他们。
一些元素默认带有padding，比如ul标签。
在做网站的时候，为了便于控制，总是喜欢清除默认padding：
*{
margin: 0;
padding: 0;
}*的效率不高，所以我们使用并集选择器，罗列所有标签：
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td{
margin: 0;
padding: 0
}border
边框。三个要素：粗细、线型、颜色。
颜色如果不写，默认是黑色。如果另外两个属性不写，则显示不出来边框。
所有线型：
a dotted border /a dashed border /a solid border /a double border /a groove border /a ridge border /an inset border /an outset border
比如border: 10px ridge red; 在chrome和firefox、IE中会有细微差别。
border是一个大综合属性，
border: 1px solid red; 就是把4个边框都设置为1px宽度、线型实线、red颜色。
border属性能够被拆开，有两种方式：
1）按3要素: border-width、border-style、border-color
border-width: 10px; →边框宽度
border-style: solid; →线型
border-color: red; →颜色
等价于border: 10px solid red;
如果某一个小要素后面是空格隔开的多个值，那么就是上右下左的顺序：
border-width: 10px 20px; border-style: solid dashed dotted; border-color: red green blue yellow;
2）按方向: border-top、border-right、border-bottom、border-left
border-top: 10px solid red; border-right: 10px solid red; border-bottom: 10px solid red; border-left: 10px solid red;
等价于border: 10px solid red;
border: 10px solid red; border-right-color: blue;
border: 10px solid red; border-style: solid dashed;
可以没有border→border: none;
某一条边没有→border-left: none;
也可以调整左边边框的宽度为0→border-left-width: 0;
用border制作一个三角形：
div{
width: 0px;
height: 0px;
border: 30px solid white;
border-bottom: none;
border-top-color: blue;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS兼容性解决方法（盒模型）- !important的IE7，Firefox问题
- CSS兼容性解决方法（盒模型）- !important的IE7，Firefox问题
- CSS兼容性解决方法（盒模型）- !important的IE7，Firefox问题 最终解决方法
- CSS核心--盒子模型
- css 之!important
- CSS文本，锚伪类选择器以及盒子模型
- 探究HTML与CSS：!important 和 @import 规则
- CSS3盒模型display初探（display:box/display:flex）
- CSS模型框概念
- css盒模型
- JQuery确定css方框模型（盒模型Box Model）
- CSS学习之盒子模型
- CSS自学笔记（6）:CSS的模型
- CSS 选择器 样式 浮动 盒子模型 块元素 内联元素 内联块元素 定位 权重
- css基础学习（3）（盒子模型,动画）
- css学习笔记---盒模型，布局
- 精通css（4）-盒模型，定位，浮动
- CSS3盒模型——box-sizing
- css中的盒子模型
- css中!important的作用