CSS(2)_border1px solid red是什么意思-CSDN博客

本文链接：https://blog.csdn.net/john_boom/article/details/77623481

权重问题深入

同一个标签，携带了多个类名，有冲突：

<p class="spec1 spec2">我是什么颜色？</p>
<p class="spec2 spec1">我是什么颜色？</p>

和在标签中的挂类名的书序无关，只和css的顺序有关：

<style  type="text/css">
.spec2{
    color:blue;
}
.spec1{
    color:red;
}
</style>

红色的。因为css中red写在后面。

!important标记

<style type="text/css">
    p{
        color:red !important;
    }
    #para1{
        color:blue;
    }
    .spec{
        color:green;
    }
</style>

k:v !important;
来给一个属性提高权重。这个属性的权重就是无穷大。
一定要注意语法：
正确的：
font-size:60px !important;

font-size:60px; !important;→ 不能把!important写在外面
font-size:60px important;→  不能忘记感叹号

!important需要强调3点：
1） !important提升的是一个属性，而不是一个选择器

<style type="text/css">
p{
    color:red !important;   → 只写了这一个!important，所以就字体颜色属性提升权重
    font-size: 100px ;      → 这条属性没有写!important，所以没有提升权重
}
#para1{
    color:blue;
    font-size: 50px;
}
.spec{
    color:green;
    font-size: 20px;
}
</style>

所以，综合来看，字体颜色是red（听important的）；字号是50px（听id的）;

2） !important无法提升继承的权重，该是0还是0
比如HTML结构：

<div>
    <p>哈哈哈哈哈哈哈哈</p>
</div>

有CSS样式：

div{
    color:red !important;
}
p{
    color:blue;
}

由于div是通过继承性来影响文字颜色的，所以!important无法提升它的权重，权重依然是0。
干不过p标签，因为p标签是实实在在选中了，所以字是蓝色的（以p为准）。

3）!important不影响就近原则
如果大家都是继承来的，按理说应该按照“就近原则”，那么important能否影响就近原则呢？
答案是：不影响。远的，永远是远的。不能给远的写一个important，干掉近的。
! important做站的时候，不允许使用。因为会让css写的很乱。
现在，我们知道层叠性能比较很多东西：
选择器的写法权重，谁离的近，谁写在下面。

权重计算的总结

这里写图片描述

盒模型

盒子中的区域

一个盒子中主要的属性就5个：width、height、padding、border、margin。

width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。
height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度
padding是“内边距”
border是“边框”
margin是“外边距”

    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            border:1px solid red;
            padding: 50px;
        }
    </style>

在浏览器中的显示效果如下：
这里写图片描述

认识width、height

这个盒子width:200px; height:200px; 但是真实占有的宽高是302*302。

这是因为还要加上padding、border。宽度和真实占有宽度，不是一个概念！！

下面这两个盒子，真实占有宽高，完全相同，都是302*302：

1           .box1{
2               width: 100px;
3               height: 100px;
4               padding: 100px;
5               border: 1px solid red;
6           }
7   
8           .box2{
9               width: 250px;
10              height: 250px;
11              padding: 25px;
12              border:1px solid red;
13          }

真实占有宽度= 左border + 左padding + width + 右padding + 右border

认识padding

padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。
也就是说，background-color将填充所有boder以内的区域。

padding是4个方向的，所以我们能够分别描述4个方向的padding。
方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。

小属性：

padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;

top 上、right 右、bottom 下、left 左。
这种属性，就是复合属性。比如不写padding-left那么就是没有左内边距。
快捷键就是pdt、pdr、pdb、pdl 然后按tab。

综合属性：

如果写了4个值：padding:30px 20px 40px 100px;
上、右、下、左
是按照顺时针的顺序。

如果只写3个值：
padding: 20px 30px 40px;
上、右、下、??和右一样

如果只写2个值：
padding: 30px 40px;
等价于：

padding-top: 30px;
padding-bottom: 30px;
padding-left: 40px;
padding-right: 40px;

要懂得，用小属性层叠大属性：

padding: 20px;
padding-left: 30px;

对应的盒模型图：
这里写图片描述

下面的写法错误：

padding-left: 30px;
padding: 20px;

不能把小属性，写在大属性前面。

练习题

Q1 : 说出下面盒子真实占有宽高，并画出盒模型图：

div{
        width: 200px;
        height: 200px;
        padding: 10px 20px 30px;
        padding-right: 40px;
        border: 1px solid #000;
    }

真实占有宽度 = 200 + 20 + 40 + 1 + 1 = 262px
真实占用高度 = 200 + 10 + 30 + 1 + 1 = 242px
这里写图片描述

Q2 : 说出下面盒子真实占有宽高，并画出盒模型图：

1           div{
2               width: 200px;
3               height: 200px;
4               padding-left: 10px;
5               padding-right: 20px;
6               padding:40px 50px 60px;
7               padding-bottom: 30px;
8               border: 1px solid #000;
9           }

padding-left:10px；和padding-right:20px; 没用，因为后面的padding大属性，层叠掉了他们。
这里写图片描述

Q3 :现在给你盒模型图，请写出代码，试着用最最简单的方法写
这里写图片描述

width:123px;
height:123px;
padding:20px 40px;
border:1px solid red;

Q4 :现在给你盒模型图，请写出代码，试着用最最简单的方法写
这里写图片描述

width:123px;
height:123px;
padding:20px;
padding-right:40px;
border:1px solid red;

一些元素，默认带有padding，比如ul标签。
所以，我们为了做站的时候，便于控制，总是喜欢清除这个默认的padding：

*{
    margin: 0;
    padding: 0;
}

*的效率不高，所以我们使用并集选择器，罗列所有的标签（不用背，有专业的清除默认样式的样式表，今后学习）：

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
        margin:0;
        padding:04  
        }

border

就是边框。边框有三个要素：粗细、线型、颜色。
颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。

border: 1px dashed red;
这里写图片描述

比如，border:10px ridge red; 在chrome和firefox、IE中有细微差别.

追求极高的页面还原度，那么不能使用css来制作边框。
就要用到图片，就要切图了。所以，比较稳定的就几个：solid、dashed、dotted

border是一个大综合属性
border:1px solid red;

就是把4个边框，都设置为1px宽度、线型实线、red颜色。

border属性能够被拆开，有两大种拆开的方式：

1）按3要素:border-width、border-style、border-color

2）按方向：border-top、border-right、border-bottom、border-left

按3要素拆开：

    border-width:10px;    → 边框宽度
    border-style:solid;     → 线型
    border-color:red;      → 颜色。

等价于：
border:10px solid red;

一个border是由三个小属性综合而成：
border-width border-style border-color。
如果某一个小要素后面是空格隔开的多个值，那么就是上右下左的顺序：

    border-width:10px 20px;
    border-style:solid dashed dotted;
    border-color:red green blue yellow;

这里写图片描述

按方向来拆

border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;

等价于
border:10px solid red;

按方向还能再拆一层，就是把每个方向的，每个要素拆开，一共12条语句：

1   border-top-width:10px;
2   border-top-style:solid;
3   border-top-color:red;
4   border-right-width:10px;
5   border-right-style:solid;
6   border-right-color:red;
7   border-bottom-width:10px;
8   border-bottom-style:solid;
9   border-bottom-color:red;
10  border-left-width:10px;
11  border-left-style:solid;
12  border-left-color:red;

等价于border:10px solid red;

这里写图片描述

写法：

    border:10px solid red;
    border-right-color:blue;

这里写图片描述
写法：

border:10px solid red;
border-style:solid dashed;

border可以没有
border:none;
某一条边没有：
border-left: none;
也可以调整左边边框的宽度为0：
border-left-width: 0;

标准文档流

宏观的讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。

我们要看看标准流有哪些微观现象：
1）空白折叠现象：
比如，如果我们想让img标签之间没有空隙，必须紧密连接：
<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />

2）高矮不齐，底边对齐：
这里写图片描述

3）自动换行，一行写不满，换行写。

块级元素和行内元素

学习的初期，你就要知道，标准文档流等级森严。标签分为两种等级：

1）块级元素
● 霸占一行，不能与其他任何元素并列
● 能接受宽、高
● 如果不设置宽度，那么宽度将默认变为父亲的100%。
2）行内元素
● 与其他行内元素并排
● 不能设置宽、高。默认的宽度，就是文字的宽度。

在HTML中，我们已经将标签分过类，当时分为了：文本级、容器级。
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd

CSS的分类和上面的很像，就p不一样：
所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。
所有的容器级标签都是块级元素。
这里写图片描述

块级元素和行内元素的相互转换

块级元素可以设置为行内元素
行内元素可以设置为块级元素

div{
    display: inline;
    background-color: pink;
    width: 500px;
    height: 500px;
    }

display是“显示模式”的意思，用来改变元素的行内、块级性质
一旦，给一个标签设置

display: inline;

那么，这个标签将立即变为行内元素。此时它和一个span无异：
● 此时这个div不能设置宽度、高度；
● 此时这个div可以和别人并排了

同样的道理，

span{
    display: block;
    width: 200px;
    height: 200px;
    background-color: pink;
}

“block”是“块”的意思
让标签变为块级元素。此时这个标签，和一个div无异：
● 此时这个span能够设置宽度、高度
● 此时这个span必须霸占一行了，别人无法和他并排
● 如果不设置宽度，将撑满父亲

标准流里面限制非常多，标签的性质恶心。比如，我们现在就要并排、并且就要设置宽高。
所以，脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：
1）浮动
2）绝对定位
3）固定定位