属性选择器和盒模型的理解

来源：互联网发布：指向字符串数组的指针编辑：程序博客网时间：2024/05/23 21:17

css属性选择器和盒模型的理解

一、属性选择器：

1、标签名选择器

写法：标签名{…………………} 所有该标签名的样式有相同

2、 ID选择器：

写法：先在相应标签中设置一个id的属性如id=“id名”

在样式表中，通过 # + id名{…………………}

注：id名不能重复，是唯一的，也就是说只能设置一个标签内容的样式。

3、 Class选择器：

写法：先在相应标签中设置class 名如class=“class名”

在样式表中，通过 . + class名{………}

注：class在div中设置后，所有在div中的标签内容都包含class样式（优先级除外）。

例：

#id1{width:100px;height:100px; background-color:red;

.class1{width:100px;height:100px; background-color:blue;}

<pid=”id1”>web</p>

4、关于三者优先级：

标签名选择器 < class选择器＜　id选择器 < 行间样式（style=””）

例：

结果和id1样式符合。

二、盒模型

1、border：边框

写法（复合）：border：border-width border-style border-color；

border-width：边框宽度

border-style：边框样式： solid 实线 dashed虚线 dotted点线

border-color：边框颜色

（注：四个框可以分别设置 border-color-top/right/bottom/left：上右下左）

例：

div{ border-top:100pxsolid green;border-top:100px solid red;

border-top:100px solid blue; border-top:100px solid pink ;}

注：border-radios：10px 则变成圆角

<body>

</body>

2、margin：外边距

写法：margin-top/right/bottom/left 分别是上右下左外边距

例：

margin:100px100px 100px 100px;

注：

Margin的小问题：

1、 margin-top会穿透父级

例：#box1{width:300px;height: 200px;background: red;}

#box2{width:300px;height: 200px; background: yellow;margin-top:100px;}

<divid="box1">

<divid="box2"></div>

此时会观察到父级和子级一起往下移动了100px；

2、兄弟关系的margin-top 和 margin-bottom 会叠压

例：

#box1{width: 300px;background: red;}

#box2{width: 300px;height: 200px;background: yellow;

margin-bottom: 30px;}

#box3{width: 300px;height: 200px;background:blue;

margin-top: 30px;}

<divid="box1">

<divid="box2"></div>

<divid="box3"></div>

注：计算是box1和box2相聚60px，则实际显示只有30px；

解决方案：

1、给父级加边框border

2、给父级加overflow:hidden

3、父级使用padding-top;

3、padding：内边距

复合写法：padding:10px10px 10px 10px;

例：

#box4{

width: 100px;border: 1pxsolid red;padding:10px;}

div id="box4">123456</div>

盒模型总结：

1、一切元素都是块，有三种模式：相邻嵌套叠压

2、表示方法总结：margin/padding

10px; 上右下左都是10px；

10px 20px；上下为10px 左右为20px

10px 30px 20px 上为10px 左右为30px 下为20px；

3、空间大小的计算

宽：border-left X 2 + padding-left X 2 + width

高：border-top X 2+ padding-left X 2 + height

例：

div{width:100px; height:200px;border:20px solid red; padding:40px; margin:30px}

总width: 20 X 2 + 40 X 2 + 100

总height : 20 X 2+ 40 X 2 + 200

三、css定位：

1、float：

div{

text-align:center;

line-height:100px;

border:1px solid red;

float:right

}

<div>1（afsaf’）</div>

观察：

1、四个div排在同一排而且是按照4321排列。

2、且由内容撑开宽度。

2、绝对定位、绝对定位和固定定位：

相对定位relative 相对于自己本身的的位置而移动。

绝对定位：absolute位置相对于最近的父级元素的位置，如果没有，则相对于body块。

固定定位：相对于body定位。

（在定位中，top和left的优先级要高于right和bottom的优先级）

例：

div{width:300px;height: 300px; border: 3px solidblack; position: relative; top:100px; left:100px;}

span{width: 100px;height:100px;background: red;text-align: center; line-height:100px;font-size: 40px;position: absolute;/*float:left;*/}

.span1{left: 100px;}

.span2{top: 100px;}

.span3{top: 100px;left: 200px;}

.span4{top: 200px;left: 100px;}

<div>

<spanclass="span1">1</span>

<spanclass="span2">2</span>

<spanclass="span3">3</span>

<spanclass="span4">4</span>

</div>

注：div里面有相对于自己定位，而span里有相对于父级div的决定定位。

0 0