常见布局
单列布局
内容水平居中的一列布局方式
//传统布局
<style>
.header {
margin: 0 auto;
width: 100%;
height: 100px;
background-color: antiquewhite;
}
.middle {
margin: 0 auto;
width: 100%;
height: 400px;
background-color: aquamarine;
}
.footer {
margin: 0 auto;
width: 100%;
height: 100px;
background-color: aqua;
}
</style>
//flex布局
<style>
.content{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.header {
width: 100%;
height: 100px;
background-color: antiquewhite;
}
.middle {
width: 100%;
height: 400px;
background-color: aquamarine;
}
.footer {
width: 100%;
height: 100px;
background-color: aqua;
}
</style>
<body>
<div class="content">
<div class="header"></div>
<div class="middle"></div>
<div class="footer"></div>
</div>
</body>
两列自适应布局
指一列由内容撑开，另一列撑满剩余宽度的布局方式
//传统布局
<style>
.content {
overflow: hidden;
background-color: aliceblue;
}
.left {
float: left;
background-color: aqua;
}
.right {
overflow: hidden;
background-color: aquamarine;
}
</style>
//flex布局
<style>
.content {
display: flex;
background-color: aliceblue;
}
.left {
background-color: aqua;
}
.right {
flex: 1;
background-color: aquamarine;
}
</style>
<div class="content">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
三栏布局
中间列自适应宽度，旁边两侧固定宽度
圣杯布局
解决思路：传统布局为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div，先写中间列部分，这样实现中间列可以优先加载。
<style>
.content {
padding-left: 200px;
padding-right: 200px;
}
.left {
float: left;
width: 200px;
height: 500px;
background: antiquewhite;
margin-left: -100%;
position: relative;
left: -200px;
}
.middle {
float: left;
width: 100%;
height: 500px;
background: aqua;
}
.right {
float: left;
width: 200px;
height: 500px;
background: aquamarine;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
<div class="content">
<div class="middle">圣杯布局</div>
<div class="left"></div>
<div class="right"></div>
</div>
双飞翼布局
解决思路：为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
<style>
.left {
float: left;
width: 200px;
height: 500px;
background: antiquewhite;
margin-left: -100%;
}
.middle {
float: left;
width: 100%;
height: 500px;
background: aqua;
}
.middle .inner {
margin: 0 200px;
}
.right {
float: left;
width: 200px;
height: 500px;
background: aquamarine;
margin-left: -200px;
}
</style>
<div class="content">
<div class="middle">
<div class="inner">双飞翼布局</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
flex布局
<style>
.content {
display: flex;
height: 500px;
}
.left {
width: 200px;
background-color: antiquewhite;
}
.middle {
flex: 1;
background-color: aqua;
}
.right {
width: 200px;
background-color: aquamarine;
}
</style>
<div class="content">
<div class="middle">flex布局</div>
<div class="left"></div>
<div class="right"></div>
</div>
垂直居中方法
绝对定位+margin
<style>
.content {
width: 200px;
height: 200px;
position: relative;
border: 1px solid red;
}
.box {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: red;
}
</style>
<div class="content">
<div class="box"></div>
</div>
绝对定位+translate
<style>
.content {
position: relative;
width: 200px;
height: 200px;
border: 1px solid red;
}
.box {
position: absolute;
background: red;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="content">
<div class="box"></div>
</div>
flex布局
<style>
.content {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
border: 1px solid red;
}
.box {
background: red;
width: 100px;
height: 100px;
}
</style>
<div class="content">
<div class="box"></div>
</div>
清除浮动方法
产生原因：父元素的高度塌陷
解决方法：
- 父元素定义height
- clear:both
- overflow:hidden开启BFC
- .添加伪元素清除浮动
.clearfix::after {
content: "";
display: block;
clear: both;
}
BFC（块级格式化上下文）
-
解释：创建一个独立的布局环境，BFC内部元素布局与外部互不影响
-
创建BFC：
- float的值不是none。（float:left 或者float:right）
- position的值不是static或者relative。（position:absolute或者position:fixed）
- display的值是inline-block、table-cell、flex、table-caption或者inline-f
- overflow的值不是visible。（overflow:hidden、overflow:scroll）
-
作用：
- 利用BFC避免margin重叠
- 清除浮动
margin重叠问题
问题：两个相邻的元素会发生margin重叠
<style>
.top {
margin-bottom: 20px;
height: 200px;
width: 200px;
background-color: aqua;
}
.bottom {
margin-top: 20px;
height: 200px;
width: 200px;
background-color: aquamarine;
}
</style>
<div class="top">top</div>
<div class="bottom">bottom</div>
解决：使用BFC
<style>
.top {
margin-bottom: 20px;
height: 200px;
width: 200px;
background-color: aqua;
}
.bottom {
margin-top: 20px;
height: 200px;
width: 200px;
background-color: aquamarine;
overflow: hidden;
}
.wrap {
overflow: hidden;
}
</style>
<div class="top">top</div>
<div class="wrap">
<div class="bottom">bottom</div>
</div>
IE盒模型和标准盒模型
-
IE盒模型： 高宽（content+border+padding）+ margin
-
标准盒模型：高宽（content）+ padding + border + margin
-
设置两种模型方法：box-sizing：border-box和content-box
伪类和伪元素区别
伪类：用于向某些选择器添加特殊的效果。用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上，如a标签的:hover，表单元素的:disabled；
伪元素：是html中不存在的元素，仅在css中用来渲染的，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。如::before、::after。
html5新增标签
header、nav、article、footer、section、aside、datalist、audio、video
css3新增特性
- text-shadow： 文字阴影
- 边框：
- border-radius：边框圆角
- box-shadow：边框阴影
- border-image：边框图片
- 背景：
- background-size ：设置背景图片的尺寸
- background-origin ：设置背景图片的原点（定位、位置）
- background-clip ：设置背景图片的裁切区域
- 渐变：
- linear-gradient：（线性渐变）
- radial-gradient ：（径向渐变）
- 过渡：transition
- 动画：animation
- 变形：transform
- 弹性布局：flex
- 伪类选择器：first-child、last-child、nth-child（n）、first-of-type…
@import和link区别
- 引用方式不同：link属于外部引用，@import属于导入式
- 放置的位置不同：link 一般放在 head 标签中，而 @import 必须放在
<style>标签中 - 加载方式不同：link 会和 dom 结构一同加载渲染，而 @import 只能等 dom 结构加载完成以后才能加载渲染页面
- 样式权重不同：link 方式的样式的权重高于 @import
- 改变样式：link 支持使用 JavaScript 改变样式，而 @import 不可以
- 加载内容不同：link 除了可以加载 css 文件以外，还可以加载javascript的文件；而 @import 只能加载 css 文件
块元素和行内元素
块元素：div、p、h1~h6、ol、ul、li、form、table、hr、nav、article、aside、canvas
行内元素：a、img、input、span、strong、button、u、q、mark、video、audio
和IE兼容的样式
-
CSS3前缀：Chrome前缀-webkit-；Firefox前缀-moz-；ie前缀-ms-；opera前缀-o-
-
Event： IE中可以直接使用event对象，其他浏览器 event对象，只能在事件发生的现场使用
-
事件绑定：addEventListener（IE）；attachEvent（其他浏览器）
-
阻止冒泡：event.stopPropagation（IE）；event.cancelBubble = true（其他浏览器）
-
target获取内容方式：event.srcElement（IE）和event.target（其他浏览器）
隐藏元素
- display:none -> 元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘
- visibility:hidden -> 元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排
- opacity:0 -> 将元素的透明度设置为0
z-index问题（层叠上下文）
- 背景： CSS 为盒模型的布局提供了三种不同的定位方案 ：正常文档流、浮动、定位
- z-index堆叠上下文只有在postion:relative/absolute/fixed时才生效，static时无效。
- 当父元素和子元素都处于堆叠上下文时，子元素继承父元素的优先级，如果父元素没有处于堆叠上下文时，即z-index:auto;或者position:static;时，子元素不会继承父元素的优先级。
- z-index为0时依然处于堆叠上下文中，比负值高，比正值低。
- z-index为负值时不仅会处于z-index为0和正值元素的后面，还会处于非堆叠元素的后面。
meta viewport
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
-
设置 viewport 的宽度：width
-
设置 viewport 的高度：height
-
设置页面的初始缩放值：initial-scale
-
允许用户最小缩放值：maximum-scale
-
允许用户最大缩放值: minimum-scale
-
是否允许用户进行缩放：user-scalable
1像素边框问题
-
原因： 有些手机分辨率比较高，是二倍屏或者三倍屏，在 CSS 中定义 border 为 1px，这些手机可能是两个物理像素或者是三个物理像素的高度（即看起来比 1px 粗）。
-
解决： 通过背景图片实现、通过 transform:scale(0.5) 实现（也可以解决Chrome的最小字体12px限制问题）、通过 viewport + rem 实现
css画三角形
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
禁止复制粘贴
- css -> user-select:none控制用户能否选中文本
- js -> 禁止oncopy事件
选中文本
::selection -> 选中文本的文本颜色
167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
