css三大特性
- 继承性
- 层叠性
- 优先级(权重)
1.继承性
- 子元素可以继承父元素的样式,也就是包含在内部的标签可以拥有外部标签的样式
- 在css中只有以text-、font-、color、line-的属性才可以被继承
- 继承不仅仅局限于子元素,后代元素都可以继承
- 特殊性:
- a标签:字体颜色和下划线是不能被继承的,必须单独的设置a的颜色和下划线
- h标签:字体大小和粗细也不能被继承,需要单独设置
<style>
p{
/* text-decoration:underline; */
color:chocolate;
}
a{
text-decoration: none;
color:cyan;
}
div{
font-weight: lighter;
}
</style>
</head>
<body>
<P>我是p<a href="">超链接</a></P>
<p>我是p<b>我是b</b></p>
<div>
<h3>我是h3</h3>
</div>
</body>
- 效果
[外链图片转存失败(img-ZTQYMVAP-1567222895235)(./1559963093217.png)]
2.层叠性
- 两种选择器设置同一个样式到同一个元素身上,(权重相同时)那么后面的样式会覆盖前面的样式,相同的样式被覆盖,不同的样式会叠加
效果一:
<style>
[name]{
color:green;
}
.box{
color:red;
text-decoration:underline;
}
</style>
<body>
<div class="box" name="div">我是div</div>
</body>
[外链图片转存失败(img-SyVshiVf-1567222895237)(./1559962812912.png)]
效果二:
.box{
color:red;
text-decoration:underline;
}
[name]{
color:green;
}
<body>
<div class="box" name="div">我是div</div>
</body>
[外链图片转存失败(img-dF1rQu1W-1567222895239)(./1559962950376.png)]
###3.优先级(权重)(面试题)
- !important>行内样式>id选择器>类选择器/属性选择器>标签选择器>通配符选择器>继承
- 注意:!important 写在;前面,而且!不能省略
##html元素分类
- 根据css的规定,每一个元素都有一个display属性,用来决定该元素的类型,每个元素都有默认的display属性
1.块元素(display:block;)
- 特点:独占一行,自上而下排列
- 可以设置宽高、padding、margin以及盒子模型的相关css属性
- 在不设置宽时,其宽度会自动填满整个父元素的宽度,高度由本身内容决定
- 可以嵌套嵌套元素
|标签|作用|
|–|--|
|div|大容器|
|h1~h6|标题|
|p|段落|
|ul>li|无序列表|
|ol>li|有序列表|
|dl>dt>dd|自定义列表|
|form|表单|
|table|表格|
|pre|预格式化|
2.行内元素(display:inline)
- 特点:
- 不独占一行,在一排显示,从左到右排列,到达父元素的最大宽度时,自动折行
- 不能直接设置宽度和高度
- 高度和宽度由本身内容决定的
- 在编辑代码时行内元素出现回车或者换行时会默认有间隙
- 解决办法一:把所有行内元素放到一行
- 解决办法二:给行内元素加注释(注释法)
- 解决办法三:给行内元素的父元素设置font-size:0;因为行内元素(子元素)会继承父元素的样式,所以我们要单独给子元素设置字体大小(最常用)
- 基线对齐问题
- 解决办法是给元素加vertical-align 属性
-
|标签|作用|
|–|--|
|span|小容器|
|b|加粗|
|strong|粗体字|
|i|斜体|
|em|斜体|
|sub、sup|下标、上标|
|ins|插入字|
|del|删除字|
|a|超链接|
|small|小字|
###3.行内块元素(display:inline-block;)
- 特点:
- 不独占一行,从左到右排列,到达父元素的最大宽度时,会自动折行
- 可以设置宽高,以及css所有的盒子模型的所有属性,
- 在不设置高宽时,高宽会由本身决定
- 间隙问题
- 基线对齐问题
|标签|作用|
|–|--|
|img|图片|
|input|输入框|
|textarea|文本域|
|select|下拉列表|
|button|按钮|
块元素、行内元素和行内块元素的相互转换
- 通过改变display属性值
- 块元素: display:block
- 行内元素:display:inline;
- 行内快元素:display:inline-block
- 让元素隐藏:display:none
###css 盒子模型
####1.padding:内边距
- padding是定义元素内容与元素边框之间的距离(相当于我们快递盒子里面的白色填充物)
####2.margin:外边距
####3.margin常见问题(面试题)
- margin塌陷问题
- 现象:一个父元素里面嵌套了一个子元素,给子元素加上margin-top值,想让子元素与父元素有一个距离,但是子元素没有和子元素分离反而子元素把margin-top值传递给了父元素,结果 父元素跟着子元素一起下移
- 解决方法一:给父元素加
overflow:hidden
代表溢出隐藏 - 解决办法二:将子元素的margin-top改写成父元素的padding-top。这样父元素的高度会多出一个padding-top的值,所以我们还需要手动的将父元素的高度减去padding-top的值
- margin重叠
- 现象:上下垂直排列两个块元素,我们给上面的元素设置了margin-bottom,下边的元素设置了margin-top,这样会出现margin值重叠,而且是设置的最大的边距值是两个元素之间的间距
- 解决办法:只给其中一个元素设置margin值
盒子模型计算公式
- 盒模型的宽度等于内容宽度+左右padding+左右border
- 盒模型的高度等于内容高度+上下padding+上下border
- 盒子模型的高度和宽度与margin无关