选择器
选择器类型
- id 选择器:#id名 {}
- 类选择器:.类名 {}
- 标签选择器:标签名 {}
- 通配符: * {},选取 html 所有的标签,作用是初始化html标签的属性
- 并列选择器:标签选择器class选择器 {},准确选择标签名一样,但class,id不一样的标签
- 相邻选择器:某元素+相邻元素 {}
- 子选择器:某元素>某子元素 {}
- 后代选择器:某元素 某元素后代 {}
- 属性选择器:属性名 [ 属性名=属性值 ]
- 伪类选择器:某元素:属性 {}
伪类和伪元素区别
- 伪类:为处于某个状态的已有元素添加对应的样式,这个状态是根据用户行为而动态改变的
:hover
用来设置鼠标悬停时元素的样式:visited
用来设置已访问过的链接的样式:first-child
用来匹配父元素的第一个子元素
- 伪元素:需要创建通常不存在于DOM文档中的元素,并为其添加样式
::before
用来设置在对象前(依据对象数逻辑结构)发生的内容,和content属性一起使用::first-line
用来设置对象内第一行的样式::placeholder
用来设置对象占位符的样式
简而言之,它们的区别在于
- 是否创造了新的元素
- 伪类用":“来表示,而伪元素可以用”::“来表示,也可以用”:"表示
选择器优先级(都为256进制)
- !important:Infineity
- 行间样式:1000
- ID选择器:0100
- 类选择器|属性选择器|伪类选择器:0010
- 标签选择器:0001
- 通配符:0000
!important > 内联选择器 >ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
实现一个半圆
如上半圆,设定左上角右上角为宽和高一样的值,左下角右下角为0,高度设置为原来高度的一半
.test1{
width: 100px;
border-radius: 50px 50px 0 0;
background-color: yellow;
height: 50px;
}
实现一个对话框
用伪元素将三角形加入边框
.test2 {
width: 150px;
height: 50px;
background-color: rgba(169, 165, 165, 0.466);
margin-left: 100px;
position: relative;
}
.test2::after{
content: '';
right: 100%;
top: 15%;
position: absolute;
width: 0;
height: 0;
border: 8px solid transparent;
border-right: 8px solid rgba(169, 165, 165, 0.466);
}
盒模型
W3C标准盒模型
width / height 只是内容高度,不包含 padding 和 border 的值
IE怪异盒模型
width / height 包含 padding 和 border 的值
box-sizing
- content-box :默认值,与标准盒子模型表现一致
- border-box :与怪异盒子模型表现一致
- inherit :指定box-sizing属性的值从父元素继承
px/rem/em/vh/vw
px
相对长度单位,像素px是相对于显示器屏幕分辨率而言的
rem
页面所有使用rem单位的长度都是相对于根元素的font-size大小。即1rem等于根元素的font-size大小。
em
子元素字体大小的em是相对于父元素的font-size大小,元素的width/height/padding/margin用em是相对于该元素的font-size
vh(Viewport Height)/vw(Viewport Width)
相对于视口的宽度和高度,1vh相当于视口高度的1%
元素line-height设置为1,具体是多少像素,怎么计算
之前有总结过:html+css常用知识点总结
概念
- 行高是指文本行基线间的垂直距离(基线是英文字母“x”的下端沿)
计算方式
- 百分比 子元素继承父元素的line-height计算后的最终值而非百分比。
- normal 子元素根据子元素自身的 font-size进行计算。
- 纯数字 纯数字方式与 normal 唯一的不同,就是数值的大小可以自己随意设定,而 normal 的值是浏览器决定的。
所以line-height设置为1,其实是元素line-height大小等于1* font-size大小
如何让谷歌浏览器网页显示小于12px以下字体
谷歌浏览器显示的最小字号是12px,那么如何实现显示小于12px以下字体呢
- -webkit-transform:scale()
- scale()只对可以定义宽高的元素生效,所以遇到行内元素要转化成行内块元素
- -webkit-text-size-adjust:none;(自chrome 27之后,取消了对此属性的支持)
如何实现一个 0.5 像素的边框
- 四边都需要
- 用transform: scale()的方式
- 设置目标元素为定位参照
- 给目标元素添加伪元素并设置绝对定位
- 给伪元素加上1px边框
- 设置宽高为目标元素两倍
- 用
transform:scale(0.5);transform-origin:left top
将伪元素缩小为0.5倍(transform-origin定义缩放基点为左上角) - 用box-sizing:border-box属性把边框都包进宽和高里面
- 用transform: scale()的方式
.box2 {
position: relative;
margin: 10px 0 0 200px;
border: none;
background: none;
height: 100px;
width: 100px;
}
.box2::after {
content: '';
position: absolute;
border: 1px solid #000;
top: 0;
left: 0;
box-sizing: border-box;
width: 200%;
height:200%;
transform: scale(0.5);
transform-origin: left top;
}
- 单边框
- border+border-image+线性渐变
.border { width: 200px; height: 200px; margin: 0 auto; border-bottom: 1px solid transparent; border-image: linear-gradient(to bottom,transparent 50%, red 50%) 0 0 100%/1px }
- 伪元素+background-image+线性渐变
.border { width: 200px; height: 200px; background-color: red; margin: 0 auto; position: relative; } .border:before { content: " "; position: absolute; left: 0; bottom: 0; width: 100px; height: 1px; background-color: blue; background-image: linear-gradient(to bottom transparent 50%, blue 50%); }
- 伪元素+scale()
.box:after{ content: ''; background-color: red; top: 0;//下边框设置bottom:0 left: 0;//右边框设置right:0 display: block; height: 1px;//左右边框设置height:200% width: 200%;//上下边框设置width:1px position: absolute; transform: scale(0.5); transform-origin: top left; }
- 移动端
- 采用meta viewport
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>
position 定位
固定定位 fixed
- 元素相对浏览器窗口是固定位置,即使窗口滚动它也不会移动
- 脱离标准流,因此不占据空间
- fixed的元素和其它元素重叠
相对定位 relative
- 相对于自己原来位置进行偏移
- 仍在标准文档流中,原来的位置会被保留
- 移动元素会覆盖其它框
绝对定位 absolute
- 脱离原来位置进行定位
- 没有已定位父级元素的前提下,相对浏览器定位
- 有已定位父级元素,通常相对父级元素进行偏移
- 脱离标准流,原来的位置不会被保留
- 会和其它元素重叠
粘性定位 sticky
- 元素先按照普通文档流定位
- 再相对于该元素的BFC和最近块级祖先元素定位
- 而后元素定位表现为在跨越特定阈值前为相对定位
- 之后为固定定位
默认定位 Static
- 默认值,没有定位
- 元素按照标准文档流进行排布
- 忽略 top, bottom, left, right 或者 z-index ,即这些都不起作用
块元素,行内元素和行内块元素
块元素
- 常见块元素
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
- 特点
- 自身独占一行,多个元素会另起一行
- 高度、宽度、内外边距都可以自定义
- 宽度默认是父元素的100%
- 块元素里可以包含行内、行内块、块元素
- 段落元素(文字元素)内不能放块元素
行内元素
- 常见行内元素
<a>、<strong>、<b>、<em>、<i>、<del>、<u>、<span>
- 特点
- 相邻行内元素在一行,一行可以显示多个
- 高度、宽度的设置无效,只会被文字撑开
- 默认宽度就是文本撑开的长度
- 行内元素只能容纳行内元素和文本
- 超链接里不能容纳超链接
行内元素设置padding和margin
- margin在水平方向有效,垂直方向无效
- padding在水平方向有效,垂直方向可以有视觉效果,但是不影响布局,没有撑大盒子,并不会对周围的元素产生影响
- 高度height和宽度width的设置是无效的,高度可用line-height设置
行内块元素
- 常见行内块元素
<img />、<input />、<td>
- 特点
- 和相邻的行内元素(包含行内块)在一行上,之间会有空白缝隙
- 一行可以显示多个(行内元素特点)
- 默认宽度就是内容的宽度(行内元素特点)
- 高度、宽度、内外边距都可以自定义(块元素特点)
行内块元素/行内元素之间出现间隙的原因以及如何解决
行内块inline-block元素之间出现空白间隙原因及解决办法
有时会遇到图片连接处出现白线的情况,这其实与img自身属性是inline-block有关
- 原因
- 元素被当成行内块/行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理,根据white-space的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化,当行内元素font-size:16px时,间距为8px
- 解决方法
- 去除元素间的空白
- 将上一个元素的闭合标签与下一个元素的开始标签写在同一行
<div class = "box"> <span>你好</span ><span>你好</span ><span>你好</span> </div>
- 两个inline-block元素间加上空白注释
<div class = "box"> <span>你好</span><!-- 消除空格 --><span>你好</span><!-- 消除空格 --><span>你好</span> </div>
- 行内块元素设置浮动
float: left;
,再清除浮动(最后一行加上<div style="clear: both;"></div>
),防止父元素高度塌陷
- 父元素设置font-size为0,子元素单独设置字体大小
- 设置margin-right为负值
- 用margin负值来抵掉元素间的空白,不过margin负值的大小与上下文的字体和文字大小相关,并且同一大小的字体,元素之间的间距在不同浏览器下是不一样的,如:font-size:16px时,Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以这个方法并不通用,也相对比较麻烦,因此不太推荐使用
- 给inline-block元素加float或者flex
- 设置字符间距或单词间距
- 给父元素一个letter-spacing或者word-spacing的负值,子元素再调整为0即可,具体使用字符间距还是单词间距其实大同小异
- 去除元素间的空白
垂直居中
以前总结过,详见CSS各种居中,十分钟掌握
top=50%
的含义:令子元素左边框距离浏览器左边50%(生效前提是需要设置本身的position:absolute或relative)margin-top
为负值时,不管是否设置高度,都不会增加高度,而会产生向上的位移
- 水平居中
- 行内元素:
text-align:center
,父级元素不为块级元素则设置父元素display:block
变成块级元素 - 块级元素
- flex
- 父元素上设置
display: flex;
justify-content: center;
- 父元素上设置
- 宽度确定
margin:0 auto
- 父元素设置
postition: relative;
属性,需要居中的块元素设置postition: absolute;
- 需要居中的块元素设置
left:50%;
,margin-left: -块元素宽度的一半;
/transform: translateX(-50%);
属性
- 需要居中的块元素设置
- 宽度不确定
- 设置
display:inlne-block
转化成行内块级元素,再设置text-align:center
水平居中 - 父元素设置
postition: relative;
,需要居中的块元素设置postition: absolute;
- 需要居中的块元素设置
left:50%;
transform: translateX(-50%);
- 需要居中的块元素设置
- 设置
- flex
- 行内元素:
- 垂直居中
- 行内元素
- flex
- 父元素上设置
display: flex;
align-items: center;
- 父元素上设置
- 单行行内元素
- 行内元素设置
line-height: 父元素高度
- 行内元素设置
- 多行行内元素
- 父元素设置
display: table-cell
和vertical-align: middle;
- 父元素设置
- flex
- 块级元素
- 父元素设置
postition: relative;
,需要居中的块元素设置postition: absolute;
- 高度确定
- 居中的块元素设置
top:50%;
,margin-top: -块元素高度的一半;
/transform: translateY(-50%);
- 居中的块元素设置
- 高度不确定
- 需要居中的块元素设置
top:50%;
transform: translateY(-50%);
- 需要居中的块元素设置
- 父元素设置
- 行内元素
flex布局
以前总结过,详见flex布局,看这一篇就够了
flex
- 是
flex-grow
||flex-shrink
||flex-basis
的简写,flex 可以指定1-3个值 - 单值语法
- 值必须为以下其中之一
- 一个无单位数:会被当做
flex-grow
的值(决定flex items如何扩展) - 一个有效的宽度值:会被当做
flex-basis
的值(用来设置flex items在main axis方向上的base size) - 关键字 none,auto或initial
- 双值语法
- 第一个值必须为一个无单位数,并且它会被当做
flex-grow
的值,第二个值必须为以下之一 - 一个无单位数:它会被当做
flex-shrink
的值(决定flex items如何收缩) - 一个有效的宽度值:它会被当做
flex-basis
的值
- 第一个值必须为一个无单位数,并且它会被当做
- 三值语法
- 第一个值必须为一个无单位数,被当做
flex-grow
的值 - 第二个值必须为一个无单位数,被当做
flex-shrink
的值 - 第三个值必须为一个有效的宽度值:它会被当做
flex-basis
的值
- 第一个值必须为一个无单位数,被当做
Q:在flex布局中,
- 父项目div:display:flex; width:1000px
- 子项目div1:flex:1 0 100px
- 子项目div2:flex:2 0 300px
子项目宽度是多少?
A: div1宽度为100px,div2宽度为300px,div宽度为1000px,容器剩余空间为600px,flex-grow之和大于1,则用来分配的剩余空间也为600px,div1分配到的剩余空间为600* 1/(1+2)=200px,即div1宽度为200+100=300px,同理可得div2的总宽度为600* 2/(1+2)+300=700px
BFC
BFC是什么
Block Formatting Content:块级格式化上下文,是CSS布局的一个概念,BFC是一个独立的渲染区域,规定了内部box如何布局, 并且这个区域的子元素不会影响到外面的元素。
BFC规则
- 容器内部会在垂直方向上自上而下排列
BFC
是页面中的一个隔离的独立容器,容器里的元素不会影响到外部元素- 垂直方向的距离由margin决定, 属于同一个
BFC
的两个相邻容器外边距会发生重叠 - 计算
BFC
的高度时,浮动元素也参与计算 - 每个元素的左margin值和容器的左border相接触
BFC
区域不会与浮动的容器发生重叠
怎么触发BFC
- 元素设置绝对定位:
position: absolute/fixed
- 元素设置浮动:
float: left/right
- display 值为:inline-block、table-cell、table-caption、flex等
- overflow 值为:hidden、auto、scroll;
Q:两个 div,都给margin:20px,这两个 div 的间距是多少?为什么会产生这种问题?怎么解决?
A:这两个 div 的间距是20px,原因是出现了margin塌陷现象:在垂直方向如果有两个元素的外边距有相遇,在浏览器中加载的真正的外边距不是两个间距的和,而是两个边距中值比较大的,边距小的塌陷到了边距值大的值内部。解决方法是设置两个不同的BFC,在两容器外都套上相同容器(id/class相同),并在容器中设置overflow:hidden
父元素高度塌陷,清除浮动
- 增加父级元素高度
- 增加一个空的div标签清除浮动
- 代码中应该尽量避免空div
.clear {
clear: both;
margin: 0;
padding: 0;
}
- 设定
overflow:hidden/scroll;
- overflow在一些下拉场景避免使用
- 给父类添加一个伪类
:after
- 无副作用
#father:after {
content: '';
display: block;
clear: both;
}
display
display 属性规定是否/如何显示元素。
display属性最详解
overflow-y:auto
内容溢出元素框时自动出现滚动条,滑动滚动条显示溢出的内容
top 和 margin-top 区别
- top是绝对定位,定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移,必须设置position为absolute。是相对body或设置了position:relative的最近父级元素的绝对定位
- margin是相对相邻元素定位,设置元素的上外边距