css-3(行元素块元素流盒子模型)

最新推荐文章于 2023-02-08 10:53:47 发布

song_kernel

最新推荐文章于 2023-02-08 10:53:47 发布

阅读量394

点赞数 2

文章标签： html css

本文链接：https://blog.csdn.net/song_kernel/article/details/78304373

版权

选择器深入探讨

1.类选择器和id选择器都可以有父子选择器

2.一个元素可以同时有id选择器和类选择器

3.当id选择器和类选择器发生冲突时,ID选择器优先级高于类选择器

4.一个元素最多有一个id选择器,但可以有多个类选择器

5.当多个类选择器发生冲突时,则以写在css文件中后面的那个选择器为准

6.我们可以把某个css文件中的多个选择器共有的部分独立写出来

行内元素(inline element),又叫内联元素：

行内元素只能容纳文本或者其他内联元素,只占据能显示自己内容的宽度，常见的行内元素有<span><a><input type="xxx"/>

块元素(block element):

块元素一般都重新开行,可以容纳文本,其他内联元素和其他块元素，即使不能占满一行,块元素也要把整行占满。常见块元素有<div><p>

注意:行内元素和块元素可以相互转换

display:inline 表示按行元素显示

display:block 表示按块元素显示

css之间可以相互引用,通过@import指令来完成

@import url("被引用的css文件")；

如果希望在html文件中引用某个xx.cs文件也可以在<style>标签中

<style>

@import url("某个css文件");

</style>

流：在网页设计中指元素(标签)的排列方式。

标准流：元素在网页中就像流水,排在前面的元素(标签)内容在前面出现,排在后面的元素(标签)在后面出现。

非标准流：当某个元素(标签)脱离了标准流（比如因为相对定位）排列，我们统称为非标准流排列。

盒子模型

盒子模型案例：

box.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "

http://www.w3c.org/TR/html4/loose.dtd">

<html>

<head>

</head>

<body>

</div>

</body>

</html>

box.css

body{

/*1px 表示边框的宽度 solid表示实线 red表示颜色*/

border:1px solid red;

width:200px;

height:200px;

/*如何让body自动居中*/

margin:0 auto;

}

/*盒子模型 margin，padding，border，content*/

.dog{

width:50px;

height:50px;

border:1px solid blue;

margin-left:5px;

margin-top:5px;

}

.dog img{

width:40px;

height:40px;

margin-left:5px;

margin-top:5px;

}

效果：

盒子深入探讨案例：

box1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "

http://www.w3c.org/TR/html4/loose.dtd">

<html>

<head>

<title>盒子模型深入理解</title>

</head>

<body>

</ul>

</div>

</body>

</html>

box1.css

.dog{

width:500px;

height:300px;

border:1px solid red;

}

.dog img{

width:50px;

height:50px;

}

.ul{

width:300px;

height:250px;

border:1px solid gray;

margin-left:5px;

padding-left:5px;

}

.ul li{

list-style-type:none;

/*左浮动*/

float:left;

width:50px;

height:52px;

border:1px solid red;

margin-right:5px;

margin-top:15px;

}

效果：

song_kernel

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-3(行元素块元素流盒子模型)

选择器深入探讨1.类选择器和id选择器都可以有父子选择器2.一个元素可以同时有id选择器和类选择器3.当id选择器和类选择器发生冲突时,ID选择器优先级高于类选择器4.一个元素最多有一个id选择器,但可以有多个类选择器5.当多个类选择器发生冲突时,则以写在css文件中后面的那个选择器为准6.我们可以把某个css文件中的多个选择器共有的部分独立写出来行内元素(
复制链接

扫一扫