CSS语法的常用技巧有哪些

这篇文章主要为大家展示了“CSS语法的常用技巧有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS语法的常用技巧有哪些”这篇文章吧。

屯昌ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！

CSS语法的常用技巧有哪些

盒模型

content-box (W3C 标准盒模型)
border-box (IE 盒模型)

具体区别是：
1. border-box的宽度一旦确定，就不会改变。width = border + padding + 内容的宽度
2. content-box会根据padding增加或者是减小。width = 内容的宽度

BFC

就是一个容器，里外不相互影响，记住：清除浮动的时候，如果使用 overflow： hidden，是存在缺点的，如果超过了范围，那么则被隐藏了

触发原理

1 根元素
2 float属性不为none,例如left、right
3 position为absolute或fixed
4 display为inline-block, table-cell, table-caption, flex, inline-flex
5 overflow不为visible，例如hidden、auto

规则

1. 内部的Box会在垂直方向，一个接一个地放置。
2. 属于同一个BFC的两个相邻Box的margin会发生重叠。
3. BFC的区域不会与float box重叠。
4. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
5. 计算BFC的高度时，浮动元素也参与计算

作用

1. 清除浮动，BFC里面的浮动元素高度也会参与计算
2. 防止margin重叠

清除浮动

.clearfix:after{
 content: '',
 height: 0;
 display: block;
 visibility: hidden;
 clear: both;
 line-height:0;//行高为0
}

布局

浮动布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
 margin: 0;
 padding: 0;
}
.left {
 float: left;
 width: 300px;
 height: 100px;
 background-color: red;
}
.right {
 float: right;
 width: 300px;
 height: 100px;
 background-color: blue;
}
.center {
 margin: 0px 300px 0px 300px;
 background-color: black;
 height: 100px;
}
</style>
</head>
<body>
<div class="father">
 <div class="left">1</div>
 <div class="right">2</div>
 <div class="center">3</div>
</div>
</body>
</html>

缺点：会存在塌陷的问题

Flex布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.father {
 display: flex;
}
.left {
 width: 300px
 height: 100px;
 background-color: red;
}
.center {
 flex:1;
 height: 100px;
 background-color: black;
}
.right {
 width: 300px;
 height: 100px;
 background-color: blue;
}
</style>
</head>
<body>
<div class="father">
 <div class="left"></div>
 <div class="center"></div>
 <div class="right"></div>
</div>
</body>
</html>

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
 margin: 0;
 padding: 0;
}
.left {
 position: absolute;
 left:0px;
 left: 300px;
 height: 100px;
 background-color: red;
}
.right {
 position: absolute;
 right:0px;
 width: 300px;
 height: 100px;
 background-color: blue;
}
.center {
 position: absolute;
 left:300px;
 right:300px;
 background-color: black;
 height: 100px;
}
</style>
</head>
<body>
<div class="father">
 <div class="left">1</div>
 <div class="center">2</div>
 <div class="right">3</div>
</div>
</body>
</html>

CSS优化

(1)压缩
(2)属性连写： font ：font-style font-weight font-size
(3)继承：font clolr
(4) CSS放入Head中，减少reflow repaint

以上是“CSS语法的常用技巧有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

分享名称：CSS语法的常用技巧有哪些
文章来源：https://www.cdcxhl.com/article34/ggjepe.html

成都网站建设公司_创新互联，为您提供、定制网站、网站内链、网站维护、移动网站建设、云服务器

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容