渡一css4
<1>行级元素/内联元素（inline）
feature:内容决定元素所占位置
不可以通过css改变宽高
<del>
<strong>
<a>
<del>
<em>
<2>块级元素（block）
feature:独占一行
可以通过css改变宽高
<div>
<p>
<ul>
<li>
<ol>
<form>
<address>
<3>行块级元素（inline-block）
feature:内容决定大小
css可以改变宽高
<img>
img标签一般只设置一个属性，例如设置一个width：100px；高会按照比例自动缩放
1）标签中会自带一些隐藏属性：
span { display: inline;}
div { display: block;}
img { display: inline-block;}
2）凡是带有inline的元素，都带有文字特性
例如：图片之间有缝隙的bug（4px）
处理方法：
img{
border: 0;
width: 100px;
height: 200px;
margin-left: -6px;
}
工程师的开发经验：
1.先写CSS代码
，也就是先写功能，然后再写HTML结构，好处在于，CSS样式表可以写设计，然后封装作为共用；
<div class="red size1"></div>
<div class="green size2"></div>
<div class="gray size3"></div>
.red { background-color: red;}
.green { background-color: green;}
.gray { background-color: gray;}
.size1 { width: 100px; height: 100px;}
.size2 { width: 200px; height: 200px;}
.size3 { width: 300px; height: 300px;}
2.标签可以自定义；
标签选择器的最大作用是初始化元素
有些标签刚出生时，其自身所带的属性并不是我想要的，可以通过初始化的方式将其进行修改。利用“标签选择器”进行初始化；
比如<a>标签，我们希望它一开始的时候是不带有下划线，同时颜色不是蓝色时，这就有必要通过“标签选择器”对其进行初始化修改；
<em>123</em>
<a href="#">3134</a>
<ul>
<li>22</li>
<li>464</li>
<li>742</li>
</ul>
a { text-decoration: none; color: #424242;}
em { font-style: normal; color: #c00;}
ul { list-style: none; padding: 0; margin: 0;}
css的开头通常用通配符选择器初始化一些属性
*{
padding: 0;
margin: 0;
}
盒子模型：
- Margin(外边距,外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框,盒子壁) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(width+height)(内容,盒子内容) - 盒子的内容，显示文本和图像。
div {
width: 100px;
height: 100px;
background-color: hotpink;
border: 10px solid black;
padding: 100px;
margin: 100px;
}
padding与margin,border都是复合值：有四个值
padding: 100px;
/* 代表四个方向都是100px */
padding: 100px 150px 200px 250px;
/* 代表上右下左 */
padding: 100px 150px 200px ;
/* 代表上 左右 下 */
padding: 100px 200px ;
/* 代表上下 左右 */
div {
width: 100px;
height: 100px;
background-color: hotpink;
border: 10px solid #000000;
padding: 10px 20px 30px;
margin: 10px 20px;
}
可视区高为160px （不算margin）
可视区宽为160px
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距**
远视图
<div class="wrapper">
<div class="box">
<div class="content">
<div class="content1"></div>
</div>
</div>
</div>
.content1 {
height: 10px;
width: 10px;
background-color: #fff;
}
.content {
width: 10px;
height: 10px;
padding: 10px;
background-color: rgb(221, 187, 207);
}
.box {
width: 30px;
height: 30px;
background-color: #fff;
padding: 10px;
}
.wrapper {
width: 50px;
height: 50px;
background-color: rgb(221, 187, 207);
padding: 10px;
}
每个body会自带属性margin:8px
所以会在一开始使用通配符标签
*{
margin: 0;
padding: 0;
}
position定位属性
层模型
1.absolute(脱离原来位置进行定位)
.demo {
position: absolute;
width: 100px;
height: 100px;
background-color: #f40;
opacity: 0.5;
}
.box {
width: 150px;
height: 150px;
background-color: green;
}
没加position定位前
加了position定位后
2.relative（保留原来位置进行定位）（灵魂出窍）
相对于原来位置进行定位
.demo {
position: relative;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background-color: #f40;
opacity: 0.5;
}
.box {
width: 150px;
height: 150px;
background-color: green;
}
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
<html>，文档进行定位
可执行下列语句进行试验
.wrapper {
/* position: relative; */
margin-left: 100px;
width: 200px;
height: 200px;
background-color: indianred;
}
.content {
/* position: relative; */
margin-left: 100px;
width: 100px;
height: 100px;
background-color: indigo;
}
.box {
position: absolute;
width: 50px;
height: 50px;
background-color: lawngreen;
}
工程师经验：
根据上述提到的特点，利用relative作为参照物（支架），用absolute定位
3.fix定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
div {
position: fixed;
left: 0;
top: 100px;
width: 100px;
height: 100px;
background-color: lightpink;
color: magenta;
}
居中固定显示，并且可以随页面缩放而移动继续居中
div {
position: fixed;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
background-color: lightpink;
color: magenta;
margin-left: -50px;
margin-top: -50px;
}
本文地址：https://blog.csdn.net/weixin_46334272/article/details/107247664