当前位置： 移动技术网 > IT编程>网页制作>CSS > 渡一css4

渡一css4

2020年07月14日  | 移动技术网IT编程  | 我要评论

<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;
}

盒子模型：

  1. Margin(外边距,外边距) - 清除边框外的区域，外边距是透明的。
  2. Border(边框,盒子壁) - 围绕在内边距和内容外的边框。
  3. Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  4. 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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网