CSS学习笔记
CSS(Cascading Style Sheets )
层叠样式表，用来描述HTML或XML文档的呈现。CSS1现已废弃，CSS2.1为推荐标准，CSS3正在标准化中。
CSS的四种引入方式：
- 内联、即在HTML文本中添加style属性；
<body><div style="color: red; font-size: 1px;"></div></body> - style标签；
<head><style type="text/css"><div>border: 1px solid red;</div</stytle></head> - 外部文件引入；
<link rel="stylesheet" href="./a.css"> - @import url (a.css);
@import url list-of-media-queries;
CSS实现左右/左中右布局：
可以给所有子元素添加 float: left; 同时给父元素添加class="clearfix"来解决浮动出现的bug。
html:
<div class="father clearfix">
<div class="child">元素1</div>
<div class="child">元素2</div>
<div class="child">元素3</div></div>
css:
.clearfix::after{
content: "";
display: block;
clear: both;
}
.child {
float: left;
}
除此方法外，还可以：
设置每个块级元素的display属性为inline-block；同时设置vertical-align: top;来解决出现的bug。然后给父元素添加text-align： center; 从而实现块状元素水平居中。
水平居中：
- 内联元素居中：
将内联元素外部的块级元素的text-align 设置为center,即可实现内联元素室的水平居中。设置行高line-height控制内联元素所占的高度。
html:
<div class="father">
<span class="child">水平居中</span></div>
css:
div.father{
text-align: center;
border:1px solid red;
}
span.child{
line-height: 20px;
}
内联元素：
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd,
strong, samp, var
a, bdo, br, img, map, object, q, script,
span, sub, sup
button, input, label, select, textarea
- 块级元素水平居中：
将固定高度的块级元素的margin-left和margin-right 设置为auto;即可。
html:
<div class="father">
<div class="child">水平居中</div></div>
css:
text-align: center;
border: 1px solid red;
height: 20px;
}
div.child{
border: 1px solid green;
height:10px;
width: 60px;
margin: 0 auto;
}
3.多个块级元素水平居中：
将每个块级元素的display设置为inline-block,然后将父容器的text-align设置为center;
html:
<div class="ch1"></div>
<div class="ch2"></div></div>
css:
div.fa{
text-align: center;
border: 1px solid red;
height: 30px;
}
div.ch1,
div.ch2{
display: inline-block;
}
垂直居中
- 内联元素垂直居中：
设置行高line-height 与父元素的高度height相等，且内联元素的字体大小远小于行高。
html:
<div class="father">
<span class="child">xxx</span></div>
css:
.father{
border: 1px solid red;
height: 80px;
}
.child{
line-height: 80px;
}
- 块级元素垂直居中：
*固定高度的块级元素：
通过绝对定位元素距离顶部50%，并设置margin-top向上移元素高度的一半。
html:
<div class="father">
<span class="child">固定高度垂直居中</span>
</div>
css:
.father {
border: 1px solid red;
position: relative;
height: 100px;
}
.child {
position: absolute;
top: 50%;
height:40px;
border: 1px solid green;
margin-top: -20px;
}
块级元素的高度由其内部文档流元素的高度总和决定
文档流：文档内元素的流动方向
内联元素：从左往右流动，宽度不够另起一行
块级元素：每块占一行，从上往下流
可使用word-break对需要断行的字断行
内联元素的高度很难决定，一般用line-height 固定一个值
脱离文档流相对屏幕定位： position：fixed;
脱离文档流：position：absolut;相对于祖先中的第一个 position： relative; 定位。
让背景图片居中：background-position: center center;
背景图按比例缩放： background-size: cover;
css画各种形状的图形：" css tricks shapes" <kbd>enter</kbd>
css渐变实现: 搜索 “css渐变”
css动画、阴影
方边框变圆边框： border-radius； 50%；
边框没有把元素包住： display: inline-block;
css中position的取值：static relative absolute fixed sticky
字体默认的行高由字体设计师决定
content-box 与 border-box的区别是：
content-box的width 不包括padding和border
border-box的width 包括padding和 border
给display ：inline 元素设置宽高是无效的，设置margin-top 、margin-bottom也无效
:xxx 伪类 :nth-child(odd/even)
:: xxx 伪元素 ::before / :: after
