官方文档:Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification (w3.org)
全属性表:Full property table (w3.org)
中文文档:CSS(层叠样式表) | MDN (mozilla.org)
查询属性是否可用:Can I use... Support tables for HTML5, CSS3, etc
CSS的全称为Cascading Style Sheet,即层叠样式表。
顾名思义,它可以一层一层的叠起来,所以这个样式应该是后定义的可以覆盖先定义的,立体一点思考页面的话,就是将页面当成一个沙盘,html是其中的布局,而CSS是其中凹凸不平的建筑,我们从顶部的视角去看,就是html的布局加最顶层的样式组合而成的页面。(有学过PS的图层概念应该更好理解)
带着问题:如何将CSS样式应用到元素上?为什么h1标签的字体那么大?
顾名思义,这是在行内直接定义样式。我们可以通过给h元素赋予样式进行改变
h2的样式
改变h2的样式
如果你使用调试工具对原始h2元素进行检查,就会发现使用该标签浏览器会自带样式
h2 {
- display: block;
- font-size: 1.5em;
- margin-block-start: 0.83em;
- margin-block-end: 0.83em;
- margin-inline-start: 0px;
- margin-inline-end: 0px;
- font-weight: bold;
}
由于需要保证标签语义化,不建议使用
标签改变样式成
这里可以要注意的是样式的格式-->style="属性:属性值;"<--键值对应,冒号分号不能丢
带着问题:内联样式的缺陷在哪里?如果我们希望整篇文章都红色,要一个一个标签设置样式吗?
这样的结果会导致代码太过冗余了,我们将共同的代码抽出来然后统一管理,看例子
变绿色标题
变绿色段落
占用多大
以上head和body元素各自需要添加的内容,利用style标签统一管理其他标签的样式
需要注意的是,h1,p等的标签的前面不需要的加“.”,而.red是自己定义的选择器,需要加“.”且需要在标签中利用class属性引用
带着问题:现在把共同的样式都抽取出来了,但是一个页面上千行样式放在页面开头真的好吗?
所谓外部样式表,顾名思义,就是将样式放在HTML文件外的另一个文件里,然后在HTML文件中导入它(或者说引用它好理解点)
我们在当前目录下新建一个style.css文件,将刚刚的样式复制过去
h2,p{color:green;} .red{background-color:red;}
在HTML文件将style元素删除,在
元素里使用link标签与style.css链接,如下图这样就可以实现HTML文件与CSS文件分离,一般来说,项目中都是CSS一个文件夹,JS文件一个文件夹,这里推荐使用外部样式表
css文件在开头最好指定编码
@charset "utf-8";
导入的时候下面的会覆盖上面的,因此更重要的样式要放在更下面(style.css更重要)
导入的方法不止一种,也可以,别忘了分号-->效率比较低
在CSS文件可以导入其他CSS文件吗?也可以,如在style.css中
@import url(./base.css);
选择器有很多种,可以是HTML的标签名或者自定义的.red等
可以参考一下:CSS 选择器参考手册 (w3school.com.cn)
以下演示采用文档样式表的方式
可以为所有的元素附加样式,以下代码作用自己测试-->效率比较低
*{margin:0;padding:0;}
以HTML标签为名设置样式
p{color:red;}
一般来说,一个网页的某一个元素的样式不会完全一样,所以需要构建类来进行层叠。使用频率高
应用两个类选择器
特点在哪呢?定义选择器的名字前要加一个“.”,class属性应用时多个选择器中间用空格隔开
命名规范可以百度一下命名规范 - iBowen - 博客园 (cnblogs.com)
id是标签的唯一标识,我们可以根据id构建选择器
id选择器记得要加
顾名思义,就是有某个属性且它的值满足我们要求便可以设置样式,示例
大红
大
属性选择器 - CSS(层叠样式表) | MDN (mozilla.org),不常用,需要再去查文档
使用两个标签,如果第二个标签是在第一个标签的“盒子”里(被包裹),则满足条件
试试,最里面也可以
多个标签以此类推
从名字就可以看出和上一个选择器的区别,需要加“>”号,示例
会变色不会变色
选择器并不是只允许标签之间的嵌套,类选择器也可以参与其中
会变色
很明显,就是相邻的两个元素之间的关系,不过有先后关系,即兄与弟之间的关系
div元素后面紧挨着的p元素
不会变色
不会变色
会变色
不会
这个和上一个的区别主要在于它不限制相邻这个条件,即
不会变色
不会变色
会变色
会变色
同时符合条件的元素,直接看例子
同时符合2个条件的元素,div元素、div元素的class为one
会变色不会变色
同时符合3个条件的元素,div元素、div元素的class为one,title属性为test
会变色不会变色
满足任意一个条件的元素都设置样式
会变色会变色
主要用于定义元素的特殊状态,比如鼠标悬停在按钮上会变化,链接是否被点击会不一样等
伪类也有不同分类,比如动态动态伪类、目标伪类、语言伪类、元素状态伪类、结构伪类以及否定违类等
①动态伪类
:link,:visited,:hover,:active,:focus
a:link 未访问的链接
a:visited 已访问的链接
input:focus 获取焦点,a元素也有,不过要用Tab键选中聚焦
a:hover 鼠标挪动到链接上,必须放到:link和:visited后面才会生效
a:active 激活的链接(鼠标在链接上长按住未松开),必须放到hover后面
要去掉focus状态可以如下:
②结构伪类
:nth-child(n)
:nth-child(3) 子元素的第三个
:nth-child(n) n为自然数,表示子元素的0,1……元素,还可以:nth-child(2n)表示偶数
p:nth-child(even) 匹配于父元素的偶数P元素, odd表示奇数
nth-last-child(n) 倒着数
:nth-of-type(n)
:nth-of-type(3) 同类子元素的第三个
nth-last-of-type
:first-child 等同于nth-child(1)
:last-child 等同于nth-last-child(1)
:first-of-type 等同于nth-of-type(1)
:only-child 是父元素唯一的子元素
:only-of-type 父元素中唯一类型的子元素
:root 根元素,就是元素
:empty 空元素,内容为空的元素
:not(x) 否定伪类,x是一个简单选择器
:not(html):not(body):not(div) 表示除了html、body、div以外的元素
③目标和元素状态伪类
:target 目标伪类,控制锚点的样式
disabled/enable
:checked 主要用于设置单选按钮radio和复选框checkbox被选中的样式
参考:
::first-letter 第一个字
p::first-letter {} 段落的第一个字做特殊效果
::first-line 第一行
p::first-line {} 段落的第一行做特殊效果
::before
::after
span::before {content:'123';color:red;margin-right:20px} 表示在span元素前添加一个元素
content属性一定要有
::placeholder
设置占位符样式
color: tranparent 代表透明
前景色(文字颜色),定义颜色的方式可以是颜色名red、十六进制颜色值(#FF0000)、rgb代码的颜色(rgb(255,0,0))、带透明通道的rgba代码(rgba(255,0,0,0.5))这四种,后三者比较精确
p{color:red;color:#FF0000;color:rgb(255,0,0);color:rgba(255,0,0,0.5);}
rgba的a是alpha,值为0-1,对应完全透明到不透明
之所以叫前景色,是因为定义的框也和文字一样的颜色,十六进制颜色和rgb颜色值可以转换
关于二进制十六进制等的介绍:各进制及其转换详解 - Felix-Zhang - 博客园 (cnblogs.com)
测试一下下划线和边框是否和文字的颜色一样
text-decoration指添加到文本的修饰,border指边框,这里不详细介绍
设置字体尺寸属性的方式有绝对尺寸30px,相对尺寸2em、%、rem等,30px即30像素,em和%都是针对父元素的比例,即套娃中的上一层,而rem是固定对根元素的比例,谷歌浏览器字体默认最小12px,这个通过浏览器设置进行更改
设置背景颜色,同color
div的背景色span的背景色
设置元素的宽度(width)和高度(height),要分清宽度和高度的效果,我们同时设置背景色方便查看,经过这个例子应该能更好的理解页面的布局了
看div变成一个正方形
PS:宽度和高度不适用于非替换行业元素,如span
如何看其他网站的布局呢?这里有个小技巧分享一下
在一个页面上右键-->检查,可以显示调试工具,工具右边有个加号(新建样式规则),点击之后写上以下代码
div{outline:5px red solid;}
这里要注意,我们是可以给页面添加样式的,不过仅我们浏览器可见
用于设置文字的装饰线(下划线、删除线等等)
属性值有:none(如可以去除元素的下划线)、underline(添加下划线)、overline(上划线)、linethrough(中划线、删除线)。注:子元素无法用none删除父元素的设置
百度一下
到这里就能明白其它网站的跳转链接没有下划线的原因了
letter-spacing设置字符间距,word-spacing设置单词间距,默认都为0,单位和字体尺寸类似
Hi world
Hi world
Hi world
可设置为负数,可以试试中文的效果
设置字符的大小写转换,常用的属性值有使每个单词首字符大写的capitalize,将单词的所有字符变为大写的uppercase,将单词的所有字符变为小写的lowercase,以及没有任何影响的none
Hello World
设置文本内容的首行缩进值,单位和字体大小差不多,谷歌浏览器默认的字体大小为16px,缩进值2em是相对于font-size(50px)的,即缩进两个字符大小
核心价值观24字分别是:富强、民主、文明、和谐、自由、平等、公正、法治,爱国、敬业、诚信、友善。
行内内容或者行内元素(例如文字)如何相对它的块父元素对齐。属性值有left、right、center、justify,会继承
提前接触行内盒子
如果div的样式里不设置display属性,那么即使设置了width为200px,div元素依然是一整行的
附:justify是两端对齐,对最后一行无效,使用justify-all可以强制使最后一行两端对齐或者用text-align-last来设置
用于设置文字的字体名称,默认是“Microsoft YaHei”(微软雅黑),设置时的值用中文英文都可以
这是微软雅黑试试宋体
为了防止客户的操作系统中没有我们设置的字体,一般设置时都设置多个字体,中间逗号隔开
从左到右选择字体,直到找到为止,因此英文字体一般放在中文字体前(要注意版权问题)
用于设置字体的粗细,属性值可以用数字1-1000,也可以用normal(等同400)、bold(等同700),bold即加粗,越大的值越粗。元素默认加粗
用于设置字体的倾斜效果,属性值有normal、italic(选择斜体,如果当前字体没有可用的斜体版本,会选用倾斜体(oblique)替代)、oblique(选择倾斜体,如果当前字体没有可用的倾斜体版本,会选用斜体(italic
)替代),即一般设置为italic即可
不常用,用于设置小写字母的表现,设置为small-caps可以使小写字母转换为大写字母然后缩小到小写字母的大小,有兴趣可以自己实践一下
设置行高,即一行文字的高度
行高的属性值单位也和字体大小一致,要使字体在块元素垂直居中,如下
试试垂直居中效果
这是一个缩写属性,即将font-style、font-variant、font-weight、font-size/line-height、font-family
这六个值同时赋给font属性,可以节省代码量
试试font多重的效果
font-style、font-variant、font-weight可以随意调换位置,也可以省略,必须包含的属性是font-size和font-family,且font-size要在font-family之前,line-height可以省略
display的以下取值,等同于某些HTML元素
table:
,一个block-level表格
inline-table:
,一个inline-level表格
table-row:
table-row-group:
table-header-group:
table-footer-group:
table-cell:
, ,一个单元格 table-caption:
,表格的标题 list-item:
1. list-style-type 设置li元素前面标记的样式
li { list-style-type: decimal; } 由实心点变为数字,和有序列表一样
disc 实心圆 circle 空心圆 square 实心方块 decimal 阿拉伯数字 none 啥也没有
lower-roman 小写罗马数字 upper-roman 大写罗马数字
lower-alpha 小写英文字母 upper-alpha 大写英文字母
去掉 li 元素左边的空白可以用padding: 0 和 margin: 0 去掉
2. list-style-image 设置图片替换 li 元素前面的空白部分,一般不用这个,用其它元素插入
3. list-style-position 设置实心点属于盒子的内部(inside)还是外部(outside)
都不怎么用,一般都 list-style: none; 来把默认样式去掉
list-style 是list-style-type,list-style-image,list-style-position 的缩写属性
17.
的一些属性
1. border 表格边框实线的宽度
2. cellpadding 单元格内部内边距的大小
3. cellspacing 单元格之间边距的大小
4. width 表格宽度
5. height 表格高度
6. align 表格对齐方式(center, left, right),记住是表格而不是表格内容
1. valign 单元格的垂直对齐方式(top, middle, bottom, baseline)
2. align 单元格的水平对齐方式(left, center, right)
1. valign 单元格的垂直对齐方式(top, middle, bottom, baseline)
2. align 单元格的水平对齐方式(left, center, right)
3. width 表格宽度
4. height 表格高度
5. rowspan 单元格合并的行数 rowspan="2"
6. colspan 单元格合并的列数 colspan="2"
1. border-collapse: collapse; 将边框合并
2. margin: 0px auto; 表格居中 (text-align不是给块级元素用来居中的)
3. border-spacing: 10px, 20px; 用于设置单元格之间的水平,垂直间距
18. display
能改变元素的显示类型,有4个常用值
block:让元素显示为块级元素
inline:让元素显示为行内级元素
none:隐藏元素,从html里消失,其他元素会填充该位置
inline-block:让元素同时具备行内级、块级元素的特征。对内块级,对外行内级
19.visibility
visible
hidden:隐藏元素,依然占据空间
20.overflow
用于控制内容溢出时的行为
visible:溢出的内容照样可见
hidden:溢出的内容直接裁剪
scroll:溢出的内容被裁剪,但可以通过滚动机制查看
auto:自动根据内容是否溢出来决定是否提供滚动机制
还有overflow-x和overflow-y控制方向
21.min-width / min-height
内容相关属性
当浏览器缩小到超过设定值,浏览器会出现滚动条防止页面挤在一起
22.max-width / max-height
内容相关属性
可以给行内元素设置,内容太多时到阈值可以换行
max-height 超过之后会溢出,结合overflow属性可以加滚动条
23.word-break
word-break:break-all
允许太长的单词换行
24.margin
设置盒子的外边距
margin: 10px 20px 30px 40px
设置上右下左,一个顺时针方向的排列
细节:
1. margin:10px 20px 等同于 margin: 10px 20px 10px 20px
2. 两个盒子上下边距一起设置时会折叠,左右边距不会。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
3. 如果块级子元素和父元素的顶部线重叠,给块级子元素设置上边距样式会传递给父元素
如果块级子元素和父元素的底部线重叠,并且父元素的高度是auto,给块级子元素设置下边距样式会传递给父元素
如何防止出现传递问题:
①给父元素设置padding-top / padding-bottom
②给父元素设置border
③触发BFC(block format context),设置overflow为auto/hidden
BFC是什么?10 分钟讲透BFC 原理 (itcast.cn)
25.border
border-top-width,border-right-width,border-bottom-width,border-left-width
border-width 是上面4个属性的简写属性
border-top-color,border-right-color,border-bottom-color,border-left-color
border-color 是上面4个属性的简写属性
border-top-style,border-right-style,border-bottom-style,border-left-style
border-style 是上面4个属性的简写属性
border: 10px solid red;
当你想设置圆角时:border-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius,可设置椭圆
border-top-left-radius: 20px 50px; 分别代表水平方向的半径和垂直方向的半径
border-radius 是上面的缩写属性斜线前水平半径,从上左顺时针方向
border-radius: 10px 20px 30px 40px/15px 25px 35px 45px
border-radius: 50% 参考的是当前的显示宽度,动态画圆
26.outline
调试必备,在浏览器的开发者工具写入div {outline: 1px solid red !important}可看清布局
outline 表示元素的外轮廓,不占据空间,默认显示在border的外面
outline-width,outline-style,outline-color
应用场景:
CSS重置,去除,的focus轮廓效果
a, input, textarea {outline: none;}
27. box-shadow / text-shadow
=inset?&& {2,4}&& ? inset 外框阴影变成内框阴影
第1个
:水平方向的偏移,正数往右偏移 第2个
:垂直方向的偏移,正数往下偏移 第3个
:模糊半径(blur radius) 第4个
:全方位延伸距离 box-shadow: -5px 5px 10px,5px 0px 10px(正数向右,正数向下,模糊)可设置多个阴影
28.box-sizing
box-sizing: content-box; 含义是设置宽度和高度时只是指定内容的宽高
box-sizing: border-box; 含义是设置宽度和高度时是内容+内边距+边框的宽度
29. background-image
用于设置元素的背景图片,元素要有具体的宽高,背景图片才能显示出来
会盖在(不是覆盖)background-color的上面
background-image: url("./img/xx.jpg"),url("./img/xx.jpg");
background-repeat: repeat; 平铺
background-repeat: repeat-x; 水平平铺
background-repeat: repeat-y; 垂直平铺
background-repeat: no-repeat; 不平铺
background-size: auto 图片原大小
background-size: cover 图片会覆盖背景大小
background-size: contain 图片会适应背景大小,可能会有某部分背景露出来
background-size: 50% 相对于背景区的宽度
background-size: 10px 20px 相对于背景区的宽度
坐标系,左上角为原点,向右为正x 向下为正y
background-position: 60px 80px
background-position: right top (center, left, right center, top, bottom)
background-position: 80px center
30.text-indent
在不想显示某个文本时经常设置这个值为-999px
31.background-attachment
scroll: 背景图片跟随元素一起滚动(默认值)
local: 背景图片跟随元素以及元素内容一起滚动,会随着box的内容的滚动,背景一起滚动
fixed: 背景图片相对于浏览器窗口固定,背景是固定的,不会随着box的滚动而滚动
32.background
background 是一系列背景相关属性的简写属性,常用格式是
image position/size repeat attachment color
①background-size 可以省略,如果不省略,background-size必须紧跟在background-position的后面
②其他属性也都可以省略,而且顺序任意
background: url("images/beer.png") center center/150px 250px no-repeat #f00;
颜色渐变效果
background: linear-gradient(90deg, red, blue);
渐变角度调试下便知
33.cursor
可以设置鼠标指针(光标)在元素上面时的显示样式
auto 根据上下文决定指针的显示样式,比如根据文本和非文本切换指针样式
default 由操作系统决定,一般就是一个小箭头
pointer 一只小手,鼠标指针挪动到链接上面默认就是这个样式
text 一条竖线(Ⅰ)
none 鼠标消失术
34. position
定位流需要的属性
35.sub/sup
下标
上标
36.z-index
用来设置定位元素的层叠顺序(仅对定位元素有效)
取值可以是正整数,负整数,0
①如果是兄弟关系,z-index越大,层叠在越上面
z-index相等,写在后面的那个元素层叠在上面
②如果不是兄弟关系
各自从元素自己以及祖先元素中,找出最邻近的2个定位元素进行比较
而且这2个定位元素必须有设置z-index的具体数值
37.transform
允许你旋转,缩放,倾斜或平移给定元素,行内元素(inline elements)无效
①平移:translate(x, y)
transform: translate(10px, 0); 表示向右边平移10px
transform: translate(50%); 表示向右平移自身宽度50%
值类型:数字,百分比(参照元素本身bounding box)
②缩放:scale(x, y)
默认以元素中心为原点向两边缩放,可以用transform-origin来设置变形的原点
值类型:数字(1 保持不变 2 放大一倍 0.5 缩小一半),不支持百分比
③旋转:rotate(deg)
正数顺时针,负数逆时针
transform: rotate(45deg);
④倾斜:skew(deg, deg)
正数顺时针,负数逆时针,正方形变平行四边形
transform: skew(10deg)
transform-origin
一个值,设置x轴的原点,两个值,设置x轴和y轴的原点
必须是
、 或left,center,right,top,bottom关键字中的一个 left,center,right,top,bottom
length:从左上角开始计算
百分比:参考元素本身大小
transform-origin: left top; 左上角
38.transition
transition属性是transition-property,transition-duration,transition-timing-function和transition-delay的一个简写属性
transition: width 1s linear 2s;
transition:值1 transition-property: transform/width/height/all
值2 transition-duration: 100ms
值3 transition-timing-function: 动画的变化速度:ease/ease-in;
值4 transition-delay::延迟/等待多久再执行这个动画;
①transition-property
指定应用过渡属性的名称
可以写all表示所有可动画的属性
属性是否支持动画查看文档
②transition-duration
指定过渡动画所需的时间
单位可以是秒或毫秒
③transition-timing-function
指定动画的变化曲线
④transition-delay
指定过渡动画执行之前的等待时间
39. vertical-align
默认值:baseline(字母x的下方)基线对齐,会有多余像素(底线与基线的距离)
top 把行内级盒子的顶部跟line boxes顶部对齐
middle 行内级盒子的中心点与父盒基线加上x-height一半的线对齐,因为文字下称距离上方会大于下方
如何让块完全居中?
img { position: relative; top:50%; transform: translate(0, -50%); }
bottom 把行内级盒子的底部跟line box底部对齐
把行内级盒子提升或者下降一段距离(距离相对于line-height计算\元素高度),0%意味着同baseline一样
:把行内级盒子提升或者下降一段距离,0cm意味着同baseline一样 40. filter
将模糊或颜色偏移等图形效果应用于元素
高斯模糊(毛玻璃效果)
filter: blur(5px);
41.opacity
不透明度,0为透明,1为不透明
42.语义化元素
nav,header,main,footer
43.媒体元素
属性有 src,controls,autoplay,muted,loop
四、CSS属性特性介绍
并不是所有的属性都是可以继承的
1.继承的是计算量,而不是编写的字面量
继承是25px而不是0.5em
2.继承是层叠的
即后面的属性会将前面写过的属性覆盖
如何区分哪个属性优先级顺序呢?
当选择器不同时,要看选择器的权重;当选择器相同时,要看选择器的写的位置前后。
!important>内联样式>id选择器>(类选择器,属性选择器,伪类)>(元素选择器,伪元素)>通配选择器
2个id选择器 > 1个id选择器,如果都为两个id选择器,则比较下一类型的选择器
3.CSS的sprite
是一种CSS图像合成技术,将各种小图片合并到一张图片上,然后利用CSS的背景定位来显示对应的图片部分
好处:减少网页的http并发量,减少图片总大小,还可以解决命名困扰
五、元素类型
一般只有行内元素才区分替换和非替换元素
1. 块级、行内级元素
根据元素的显示(能不能在同一行显示)类型
块级元素(block-level elements)
独占父元素一行
div, p, pre, h1~h6, ul, ol, li, dl, dt, dd, table, form, article, aside, footer, header, hgroud, main, nav, section, blockquote, hr 等
行内级元素(inline-level elements)
多个行内级元素可以在父元素的同一行显示
替换元素:可以随意设置宽高
非替换元素:不可随意设置宽高,宽高由内容决定
a, img, span, strong, code, iframe, label, input, button, canvas, embed, object, video, audio等
2. 替换、非替换元素
根据元素的内容类型(浏览器是否会替换掉元素)
替换元素(replaced elements)
元素本身没有实际内容,浏览器根据元素的类型和属性,来决定元素的具体显示内容
img, input, iframe, video, embed, canvas, audio, object等
非替换元素(non-replaced elements)
和替换元素相反
3. 总结
3.1 以下属性对行内非替换元素不起作用(如)
width,height,margin-top,margin-bottom
3.2 以下属性对行内非替换元素的效果比较特殊(如)
padding-top,padding-bottom,上下方向的border。特殊在会显示,但不占据空间
3.3 如何让块级元素居中?
margin: 0 auto;
3.4 如何在浏览器缩小时让背景图片永远居中显示?
.box { height: 400px; min-width: 1000px; background-image: url("../img/mhxy.jpg");background-position: center -81px }
img { position: relative; transform: translate(-50%); left: 50%;}
理解,把image的中线移到块元素的左边再向右移动到块元素的中间
3.5 background-image 和 img 的选择
加载顺序:img优先加载,等加载完HTML元素后再加载
img占用空间,但更有可能被搜索引擎收录,background-image不占用
①img 作为网页内容的重要组成部分,比如广告图片、LOGO图片、文章配图、产品图片
②background-image 可有可无。有,能让网页更加美观,无,也不影响用户获取完整的网页内容信息
3.6 布局时设置margin-right为10px如何让同一行最后一个贴紧块
①单独为最后一个元素加一个class去除margin-right
②通过伪类选择器(有兼容性问题)
③可以多加一个包含所有块的块,设置该包含块的宽度为margin-right为-10px
.container(固定宽度)>.wrap(加负margin)>很多item
3.7 同一行布局时边框重复问题如何解决
为布局内每一个元素添加 margin-right:-1px (边框为1px的情况),使边框重叠
3.8 行高为什么可以撑起div的高度?
每一行称为一个行盒(inline-boxes),行盒有一个特性就是包裹每行的行内级元素,而其中的文字是有行高的,必须将整个行高包裹进去,才算包裹这个line-level
还要注意行内都是基线对齐,所以有文本的行内级元素要注意,加了文本后基线变为文字下方
有的块底部距离父元素的底部有几个像素的距离是因为基线和底线的距离原因
3.9 如何做一个小三角?
width: 0px;
height: 0px;
border-top-width: 100px;
border-top-color: red;
border-right-width: 100px;
border-right-color: green;
border-bottom-width: 100px;
border-bottom-color: yellow;
border-left-width: 100px;
border-left-color: blue;
display: inline-block;
border-style: solid;四个三角形组成的正方形,将其他三个三角形改成透明颜色即可
六、布局类型
1. 标准流(Normal Flow)
默认情况下,元素都是按照 normal flow 进行排布,适合垂直布局
从左到右,从上到下按顺序摆放好
默认情况下,互相之间不存在层叠现象
在标准流中,还可以使用margin,padding对元素进行定位,其中margin还可以设置负数
比较明显的缺点是:
①设置一个元素的margin或者padding,通常会影响到标准流中其他元素的定位效果
②不便于实现元素层叠的效果
2. 定位流
利用position可以对元素进行定位,常用取值有4个
位置定位所用的值right,left,top,bottom,适合层叠布局
取百分比时相对于包含块而不是自身,自身可以使用transform属性
2.1 static 静态定位,默认值,元素按照normal flow布局,位置定位无效
2.2 relative 相对定位,相对自身原来的位置,不会脱离标准流
2.3 absolute 绝对定位,如果父元素为static,会继续往上找,一直找不到的话相对于视口;如果找到父元素非static,就相对于这个父元素进行绝对定位
脱离标准流
定位参照对象时最邻近的定位祖先元素(非static的元素)
子绝父相
在绝大多数情况下,子元素的绝对定位都是相对于父元素进行定位
如果希望子元素相对于父元素进行定位,又不希望父元素脱标,常用解决方案是:
父元素设置position: relative (让父元素成为定位元素,而且父元素不脱离标准流)
子元素设置position: absolute
简称为“子绝父相”
2.4 fixed 固定定位,会使元素脱离标准流
定位参照对象是视口(viewport),当画布滚动时,固定不动
脱标元素的特点:
①可以随意设置宽高
②宽高默认由内容决定的
③不再受标准流的约束
④不再给父元素汇报宽高数据
绝对定位技巧
绝对定位元素(absolutely positioned element)
position值为absolute或者fixed的元素
对于绝对定位元素来说:
定位参照对象的宽度=left+right+margin-left+margin-right+绝对定位元素的实际占用宽度
定位参照对象的高度=top+bottom+margin-top+margin-bottom+绝对定位元素的实际占用高度
如果希望绝对定位元素的宽高和定位参照对象一样,可以给绝对定位元素设置以下属性
left: 0 right:0 top:0 bottom:0 margin:0
如果希望绝对定位元素位于参照对象中心,可以给绝对定位元素设置以下属性
left: 0 right:0 top:0 bottom:0 margin:auto auto
元素的层叠注意事项
一个是定位元素,一个是非定位元素:定位元素会层叠在非定位元素上面
都是定位元素:使用CSS属性z-index来控制层叠顺序
3. 浮动流
浮动的好处,适合水平布局
①如果用inline-block做,在元素有内容会基于基线对齐时会很麻烦
②不用浮动,元素之间会有空格导致的间隙
浮动的规则
①会脱离标准流,但不能与行内级内容层叠,行内级内容将会被浮动元素推出
②朝着向左或向右方向移动,直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止
③定位元素会层叠在浮动元素上面,浮动元素会层叠在块级元素上面,但文字内容会被推出
④只会在同一行浮动
⑤行内级元素、inline-block元素浮动后,其顶部将与所在行的顶部对齐
⑥如果元素是向左(右)浮动,浮动元素的左(右)边界不能超出包含块的左(右)边界
可以通过float属性让元素产生浮动效果
⑦浮动元素之间不能层叠,后浮动的元素将紧贴着前一个浮动元素(左浮找左浮,右浮找右浮)
⑧如果水平方向剩余的空间不够显示浮动元素,浮动元素将向下移动,直到有充足的空间为止
⑨浮动元素的顶端不能超过包含块的顶端,也不能超过之前所有浮动元素的顶端
3.1 none
3.2 left
3.3 right
浮动存在的问题
①由于浮动元素脱离了标准流,变成了脱标元素,所以不再向父元素汇报高度
②父元素计算总高度时,就不会计算浮动子元素的高度,导致了高度坍塌的问题
③解决父元素高度坍塌问题的过程,一般叫做清浮动(清理浮动、清除浮动)
④清浮动的目的是:让父元素计算总高度的时候,把浮动子元素的高度算进去
清浮动的常见方法
①给父元素设置固定高度,但是扩展性不好
②在父元素最后增加一个空的块级子元素,并且让它设置clear:both,但会增加很多无意义的空标签,维护麻烦,且违反了结构与样式分离的原则
利用CSS属性-clear:
left,right,both分别要求元素的顶部低于之前生成的左浮动,右浮动和所有浮动元素的底部
③在容器元素所有浮动元素最后面中增加一个
标签,能显示出父元素的高度,但会增加很多无意义的空标签,维护麻烦,且违反了结构与样式分离的原则④给父元素增加::after伪元素,纯CSS样式解决,结构与样式分离
.clear-fix::after {content: "";display: block;clear:both; 兼容浏览器:height:0;visibility:hidden;}
.clear-fix {*zoom: 1;} //兼容浏览器
4. flex布局
flex布局(flexible布局,弹性布局),分main axis(X轴方向,从main start到main end)和cross axis(Y轴方向,从cross start到cross end)
开启了flex布局的元素叫做flex-container
display: flex 块级元素
dispaly: inline-flex 行内元素
flex-container里面的直接子元素叫做flex items
经验结论
默认情况下,所有的flex items都会在同一行显示
flex container属性
1. flex-flow
是flex-direction与flex-wrap的简写,可以省略,顺序任意
2. flex-direction
决定主轴的方向,row(从左到右),row-reverse,column(从上到下),column-reverse
3. flex-wrap
决定了flex container是单行还是多行
nowrap(默认):单行
wrap:多行
wrap-reverse:多行(对比wrap,cross start与cross end相反)
4. justify-content
决定了flex items在main axis(主轴)上的对齐方式
flex-start(默认值):与main start对齐
flex-end:与main end对齐
center:居中对齐
space-between:flex items之间的距离相等,与main start、main end两端对齐
space-evenly:flex items之间的距离相等,与main start、main end之间的距离等于flex items之间的距离
space-around:flex items之间的距离相等,与main start、main end之间的距离是flex items之间距离的一半
5. align-items
决定了flex items在cross axis上的对齐方式
normal:在弹性布局中,效果和stretch一样
stretch:当flex items在cross axis方向的size为auto时,会自动拉伸至填充flex container
flex-start:与cross start对齐
flex-end:与cross end对齐
center:居中对齐
baseline:与基准线对齐,与第一行对齐,而不是最后一行
6. align-content
决定了flex items在cross axis上的对齐方式,用法与justify-content类似
stretch(默认值):与align-items的stretch类似
flex-start:与cross start对齐
flex-end:与cross end对齐
center:居中对齐
space-between:与flex items之间的距离相等,与cross start、cross end两端对齐
space-around:flex items之间的距离相等,flex items与cross start、cross end之间的距离是flex items之间距离的一半
space-evenly:flex items之间的距离相等,flex items与cross start、cross end之间的距离等于flex items之间的距离
flex items属性
1. flex
是 flex-grow 和 flex-shrink 和 flex-basis 的简写,flex属性可以指定1个,2个或3个值
+ 单值语法:值必须为以下其中之一:
一个无单位数(number):它会被当作
的值 一个有效的宽度(width)值:它会被当做
的值 关键字none,auto或initial
+ 双值语法:第一个值必须为一个无单位数,并且它会被当作
的值 第二个值必须为以下之一:
一个无单位数:它会被当作
的值 一个有效的宽度值:它会被当作
的值 + 三值语法:
第一个值必须为一个无单位数,并且它会被当作
的值 第二个值必须为一个无单位数,并且它会被当作
的值 第三个值必须为一个有效的宽度值,并且它会被当作
的值 2. flex-grow
+ 决定了flex items如何扩展
可以设置任意非负数字(正小数、正整数、0),默认值是0
当flex container在main axis方向上有剩余size时,flex-grow属性才会有效
+ 如果所有flex items的flex-grow总和sum超过1,每个flex item扩展的size为
flex container的剩余size * flex-grow / sum
+ 如果所有flex items的flex-grow总和不超过1,每个flex item扩展的size为
flex container的剩余size * flex-grow
3. flex-basis
用来设置flex items在main axis方向上的base size,auto(默认值)、具体的宽度数值(100px)
+ 决定flex items最终base size的因素,从优先级高到低
max-width \ max-height \ min-width \ min-height
flex-basis
width \ height
内容本身的size
4. flex-shrink
决定了flex items如何收缩,可以设置任意非负数字(正小数、正整数、0),默认值是1,当flex items在main axis方向上超过了flex contaiiner的size,flex-shrink属性才会有效
+ 如果所有flex items的flex-shrink总和超过1,每个flex item收缩的size为
flex items超出flex container的size * 收缩比例 / 所有flex items的收缩比例之和
+ 如果所有flex items的flex-shrink总和sum不超过1,每个flex item收缩的size为
flex items超出flex container的size * sum * 收缩比例 / 所有flex items的收缩比例之和
收缩比例=flex-shrink * flex item的base size
base size 就是flex item放入flex container之前的size
+ flex items收缩后的最终size不能小于min-width \ min-height
5. order
决定了flex items的排布顺序,可以设置任意整数(正整数、负整数、0),值越小就越排在前面,默认值是0
6. align-self
flex items可以通过align-self覆盖flex container设置的align-items
auto(默认值):遵从flex container的align-items设置
stretch、flex-start、flex-end、center、baseline,效果跟align-items一致
七、补充
1.网络字体
@font-face可以让网页支持网络字体(Web Font),不再局限于系统自带的字体
1. 常见的字体种类
TrueType字体:拓展名是 .ttf
OpenType字体:拓展名是 .ttf、.otf,建立在TrueType字体之上
Embedded OpenType字体:拓展名是 .eot,OpenType字体的压缩版
SVG字体:拓展名是 .svg、.svgz
web开放字体:拓展名是 .woff,建立在TrueType字体之上
并不是所有浏览器都支持以上字体,使用时要多加测试
字体下载:
Browse Fonts - Google Fonts
https://fonts.google.com/
2.字体图标的好处
放大不会失真,可以任意切换颜色,用到很多个图标时,文件相对图片较小
字体图标下载
iconfont-阿里巴巴矢量图标库
https://www.iconfont.cn/
你可能感兴趣的:(前后端笔记,css,html5,html)