文章目录
1.CSS样式的继承
文字相关的样式可以被继承
布局相关的样式不能被继承 (默认是不能继承的,但是可以设置继承属性 设置 inherit 值)
<head>
<style>
div{width: 300px;height: 300px;border: 5px aqua solid;color: tomato;font: 30px 华文彩云;}
p{border: inherit;}
</style>
</head>
<body>
<div>
<p>这是一个段落</p>
</div>
</body>
2.CSS优先级
1.相同样式优先级
当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况
2.内部样式与外部样式
内部样式与外部样式优先级相同,都如都设置了相同样式,那么后写的引入方式优先级高
3.单一样式优先级
style行间 > id > class > tag(标签) > *(通配) >继承
<head>
<style>
#div1{color: red;}
#div2{color: red;font-family: 宋体;} .box{color: blue;font-family: 宋体;}
.box3{color: blue;font-family: 宋体;} div{color: yellow;font-family: 宋体;}
ul li{color: rgb(238, 15, 238);font-family: 宋体;} *{color: red;font-family: 华文彩云;} body{color: black;}
</style>
</head>
<body>
<div id="div1" style="color: blue;font-family: 宋体;" >这是一个块</div>
<div id="div2" class="box2">这是一个块</div>
<div class="box3">这是另外一个块</div>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</body>
权重:
style行间 1000
id 100
class 10
tag(标签) 1
4. !important
提升样式优先级,非规范方式,不建议使用(无法提升继承的优先级)
<head>
<style>
#div1{color: red !important;font-family: 华文彩云 !important;}
*{color: aqua !important;}
</style>
</head>
<body>
<div id="div1" style="color: blue;font-family: 宋体;" >这是一个块</div>
</body>
5.标签+类 与单类
标签 + 类 > 单 类
<head>
<style>
div{color: blue;}
div#div1{color: green;}
</style>
</head>
<body>
<div id="div1" class="box1">这是一个块</div>
</body>
6.群组优先级
群组选择器与单一选择器的优先级相同,考后写的优先级高
7.层次优先级
1.权重比较
ul li .box1 p input{ } -------1+1+10+1+1
.box2 span #elem{ }------- 10+1+100
2.约分比较
ul li .box1 p input{ }-----------------li p input{ }
.box2 span #elem{ }----------------#elem{ }
3.CSS盒子模型
组成:content -> padding -> border ->margin
组成:物品---->内边距----->包装盒—>外边距
content:内容区域
由width和height构成
padding:内边距(内填充)
写一个值:30px (上下左右)
写两个值:30px 40px(上下,左右)
写四个值:30px 40px 50px 60px(上,右,下,左)
单一样式只能写一个值:
padding-top
padding-bottom
padding-left
padding-right
margin:外边距(外填充)
写一个值:30px (上下左右)
写两个值:30px 40px(上下,左右)
写四个值:30px 40px 50px 60px(上,右,下,左)
单一样式只能写一个值:
margin-top
margin-bottom
margin-left
margin-right
<head>
<style>
#box1{width: 200px;height: 200px;background: red;border: 10px blue solid;
padding: 30px;
margin-bottom:10px ;
}
#box2{width: 200px;height: 200px;background: gray;border: 10px green solid;
padding: 30px;}
</style>
</head>
<body>
<div id="box1">这是一个盒子</div>
<div id="box2">这是一个盒子</div>
</body>
注意:
1.背景颜色会填充到margin以内的区域(可以通过对border使用transparent颜色实验)(同样的背景图片也是填充到margin以内的区域)
2.文字会在content区域
3.padding不能出现负值,margin是可以出现负值
box-sizing
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box(默认值)| border-box。
盒尺寸,可以改变盒子模型的展示形态
默认值:
box-sizing:content-box:wigth、height -> content
改变后:
box-sizing:border-box:wigth、height -> content padding boder
使用场景:
1.不用再去计算一些值
2.解决一些百分比问题
盒子模型的一些问题
margin叠加问题:出现在上下margin同时存在的时候
当给两个盒子同时添加上下外边距的时候,就会出现叠加问题。这个问题,只在上下有,左右是没有这个叠加问题的。
例如:
<style>
#box1{width: 200px;height: 200px;background: red;margin-bottom:10px ;}
#box2{width: 200px;height: 200px;background: blue;margin-top:20px;}
</style>
同时存在上下外边距时候不叠加,只按较大的那个值显示
解决方案:
1.BFC规范
2.想办法只给一个元素添加间距
margin传递问题:出现在嵌套的结构中,只是针对margin-top的问题
margin传递的问题只会出现在嵌套的结构中,且只有margin-top有传递的问题,其他三个方向是没有传递的问题的。
解决方案:
1.BFC规范
2.给父容器加边框
<head>
<style>
#box1{width: 200px;height: 200px;background:red ;border: 1px yellow solid;}
#box2{width: 100px;height: 100px;background: blue;margin-top:100px ;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
3.margin换成padding
<head>
<style>
#box1{width: 200px;height: 100px;background:red ;padding-top: 100px;}
#box2{width: 100px;height: 100px;background: blue;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
盒子模型的扩展
margin自适应
margin左右自适应是可以的,但是上下自适应是不可以的(如果想实现上下自适应的话,需要在第二大部分来进行学习)
<head>
<style>
#box1{width: 400px;height: 400px;background: red;/* margin-left: auto;margin-right: auto; */
margin: auto auto;}
</style>
</head>
<body>
<div id="box1"></div>
</body>
不设置content现象
width、height不设置的时候,对盒子模型的影响,会自动去计算容器的大小,节省代码
<head>
<style>
#box1{width: 500px;height: 500px;background: red;}
/* #box2{height: 200px;background: blueviolet;color: white;padding-left: 50px;border-left: 10px black solid;box-sizing: border-box;} */
#box2{height: 200px;background: blueviolet;color: white;padding-left: 50px;border-left: 10px black solid;}
</style>
</head>
<body>
<div id="box1">
<div id="box2">这是一些内容</div>
</div>
</body>
4.标签分类
按类型
block:块
<div> <h1>...<h6> <p> <ol> <ul> <dl> <table> <address> <blockquote> <form>
1.独占一行
2.支持所有样式
3.不写宽的时候跟父元素相同
4.所占区域是一个矩形
inline:内联
常见的内联
<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code> <img>
1.挨在一起,左右并排
2.有些样式不支持,例如:width,height,marginpadding(支持左右,不支持上下)
3.宽由内容决定
4.所占区域不一定是矩形
5.内联标签之间会有空隙,是由于编码时换行产生的
解决 5. 的方式:可以在 style 里设置
body{ font - size : 0}
然后在内联的CSS里重新写入 { font - size : … }
注:布局一般用块标签,修饰文本用内联标签
inline-block:内联块
常见的内联块
<input> <td> <textarea> <select> <option>
同时具有内联和块的特性
例如:挨在一起,但支持宽高
例如:所占区域为矩形
例如:标签之间也会有空隙
按内容
Flow:流内容
Metadata:元数据
Sectioning:分区
Heading:标题
Phrasing:措辞
Embedded:嵌入的
Interactive:互动的
相关详情网址:
https://www.w3.org/TR/html5/dom.html
按显示
替换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。
例如:img、input…
非替换元素:直接写内容,将内容直接告诉浏览器,将其显示出来。
例如:div、h1、p…
5.显示框类型
display
display:block
display:inline
display:inline-block
display:none(使其在页面中不显示,不占空间的隐藏)
注:display:none 和 visibility:hidden 区别
display:none(不占空间的隐藏)
visibility:hidden(占用空间的隐藏)
6.标签嵌套规范
块标签可以嵌套内联标签
例如:
<div>
<span></span>
<a href="#"></a>
</div>
块标签不一定能嵌套块标签
错误示范:
<p>
<div></div>
</p>
内联标签不可以嵌套块标签
组合需要嵌套规范
例如:
ul、li
dl、dt、dd
错误示范:
<span>
<div></div>
</span>
特殊举例:
<a href="">
<div></div>
</a>
a 还可以写入内联,但是 a 里面不能再写入 a
7.溢出隐藏
overflow
visible:默认
hidden
scroll
auto
x轴:overflow-x;
y轴:overflow-y;分别针对两个轴设置
8.透明度与手势
opacity
opacity:0(透明,看不见,但依旧占空间)~1(不透明)
0.5(半透明)
注意:占空间,所有的子内容也会变透明 ,对整体进行操作
rgba
rgba:0 ~ 1
0.5(半透明)
注意:可以让指定样式透明,而不影响其他样式
cursor
cursor:手势
常用手势:
cursor:pointer(手指)
cursor:help(鼠标加文号)
cursor:move(十字移动)
cursor:ne-resize(左下右上箭头)
cursor:ns-resize(向上向下箭头)
cursor:nw-resize(左上右下箭头)
cursor:zoom-in(放大镜)
cursor:zoom-out(缩小镜)
cursor:grab(手)
<head>
<style>
#div1{width: 100px;height: 100px;background: red ;opacity: 0.5;font-weight: bold;}
p{margin:0 ;}
#div2{width: 100px;height: 100px;background: rgba(255, 0, 0, 0.5);font-weight: bold;cursor: pointer
</style>
</head>
<body>
<div id="div1">这是一个块</div>
<p>这是一个段落</p>
<div id="div2">这是一个块</div>
</body>
自定义手势
准备图片: .cur、.ico
写法: cursor : url(图片地址) , auto;
9.最大和最小宽高
min-width、max-width
min-width:最小宽
max-width:最大宽
min-height、max-height
min-height:最小高
max-height:最大高
<head>
<style>
#div1{width:100px;min-height:100px;border: 3px red solid;}
#div2{max-width: 200px;max-height:100px;border: 3px green solid;}
</style>
</head>
<body>
<div id="div1">
这是一段内容 这是一段内容 这是一段内容 这是一段内容
这是一段内容 这是一段内容 这是一段内容 这是一段内容
这是一段内容 这是一段内容 这是一段内容 这是一段内容
这是一段内容 这是一段内容 这是一段内容 这是一段内容
这是一段内容 这是一段内容 这是一段内容 这是一段内容
</div>
<div id="div2">这是一段内容</div>
</body>
%单位换算:以父容器的大小进行换算
<head>
<style>
.box1{width: 200px;height: 200px;background: red;}
.box2{width: 100%;height: 70%;background: blue;}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
10.CSS默认样式
有些标签带有默认样式,有些标签没有默认样式
没有默认样式的:
div、span…
有默认样式的:
body、h1…h6、p…
可以参考网址:http://www.mafengxue.cn/596.html
11.CSS重置样式
常用的重置样式
*{margin : 0 ; padding : 0 ;}
优点:不用考虑那些标签有默认样式的margin和padding
缺点:稍微的影响性能
也可以组合一起例如:body,p,h1,ul{ margin : 0 ; padding : 0 ;}
ul{ list-tyle : none;}
a{ text-decoration : none ; color : #666;}
img{ display : block;}
问题现象:图片跟容器底部有一些间隙
内联元素的对齐
的基线对齐,而不是文字的底线对齐的。
vertical-align :baseline;基线对齐方式的默认值
可以这样修改:
img { vertical-align : bottom;}
一般来说写具体页面的时候或一个布局效果的时候:
1.写结构
2.CSS重置样式
3.写具体样式
reset.css参考链接:
https://blog.csdn.net/brain_bo/article/details/81560444
12.float 浮动
文档流
文档流是文档中可显示对象在排列时所占用的位置
float特性
加了浮动元素,会脱离文档流,会延迟父容器靠左或者靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列
float取值
left
right
none(默认)
<head>
<style>
body{border: 1px black solid;}
#box1{width: 200px;height: 200px;background: blue;float: left;}
#box2{width: 200px;height: 200px;background: red;float: left;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
float注意点
1.只会影响后面的元素。
<head>
<style>
body{border: 1px black solid;}
#box1{width: 200px;height: 200px;background: blue;}
#box2{width: 200px;height: 200px;background: red;float: left;}
#box3{width: 300px;height: 300px;background: yellow;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
2.内容默认提升半层。
3.不加宽度时,默认宽根据内容决定。
4.换行排列。
<head>
<style>
ul{margin: 0;padding: 0;list-style: none;width: 300px;height: 300px;border: 1px black solid;}
li{width: 100px;height: 100px;background: red;float: left;border: 1px yellow solid;box-sizing: border-box;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<head>
<style>
ul{margin: 0;padding: 0;list-style: none;width: 300px;height: 300px;border: 1px black solid;}
li{width: 100px;height: 100px;background: red;float: left;border: 1px yellow solid;box-sizing: border-box;}
li:nth-of-type(1){height: 120px;}
li:nth-of-type(2){height: 140px;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
5.主要给块元素添加,但也可以给内联元素添加。
<head>
<style>
p{float: right;}
</style>
</head>
<body>
<p>66666666666666666</p>
</body>
清除float浮动
利用clea属性清除float浮动
属性
clear:none; —说明:允许有浮动对象
属性
clear:right;—说明:不允许右边有浮动对象
属性
clear:left;—说明:不允许左边有浮动对象
属性
clear:both;不允许有浮动对象
固定宽高:不推荐,不能把宽高固定死,不适合做自适应的效果
父元素浮动:不推荐,因为父容器浮动也会影响到后面的元素
overflow:hidden(BFC规范),如果有子元素想要溢出,那么会受影响
display:inline-block(BFC规范),不推荐,父容器会影响到后面的元素
设置空标签:不推荐,会多添加一些标签
after伪类:推荐,是空标签的加强版,目前各大公司的做法