4---css的核心：盒子、浮动+定位

最新推荐文章于 2022-12-15 21:58:32 发布

「已注销」

最新推荐文章于 2022-12-15 21:58:32 发布

阅读量644

点赞数

分类专栏： ======= Web ======= html + css + js

本文链接：https://blog.csdn.net/Songjs19931206/article/details/42391443

版权

======= Web ======= 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

html + css + js

32 篇文章 0 订阅

订阅专栏

css的核心内容---流

标准流/非标准流

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

　　标准流：默认的布局方式。元素在网页中像流水，排在前面的元素(标签)在前面出现，排在后面的在后面出现。

　　非标准流：当某个元素(标签)脱离了标准流[比如因为相对定位]排列，我们统称为非标准流排列。(在定位部分详细讲解。在实际操作创建网页时，经常会用到：让某个元素脱离其本身的位置。)

盒子模型：

1.每一个div的左上角都可以看做一个原点。每个div下的元素，最先依据其上最近的一层div。

2.一个盒子(遵循类s1)下的元素，要使其遵循一个类：在css中可以直接定义： .s1 属性名{}

细节说明：

(1) html 元素都可以看成一个盒子。

(2) 盒子模型的参照物不同，则使用的css属性页不一样。

(3)如果你不希望破坏外观，则尽量使用margin布局，因为padding会破坏盒子的大小。(相当于这个盒子变的有弹性了，margin如果过大，盒子内容会被挤出盒子，但盒子本身没有变化。)

盒子模型的综合案例：

代码：

//当div1内部包含了一个无序列表时：

/*div1用于控制显示的位置*/
.div1{} 
/*将来用于控制显示图片区域的宽度和高度---还有其它区域*/
.faceul{}
/*用于控制单个图片区域；*/
.faceul li{}

//实例全部代码：

html:

<body>
    <div class="div1">
    <div class="div2">
    <span class="span1"><font class="font1">优酷牛人 </font><a href="#">更多牛人</a></span>
    <ul class="faceul">
    <li><img src="log.jpg" /><br /><a href="#">张三</a></li>
    <li><img src="log.jpg" /><br /><a href="#">张三</a></li>
    <li><img src="log.jpg" /><br /><a href="#">张三</a></li>
    </ul>
    </div>
    <div class="div2">
    <span class="span1"><font class="font1">优酷牛人 </font><a href="#">更多牛人</a></span>
    <ul class="faceul">
    <li><img src="log.jpg" /><br /><a href="#">张三</a></li>
    <li><img src="log.jpg" /><br /><a href="#">张三</a></li>
    <li><img src="log.jpg" /><br /><a href="#">张三</a></li>
    </ul>
    </div>

    <div class="div2">
    <span class="span1"><font class="font1">优酷牛人 </font><a href="#">更多牛人</a></span>
    <ul class="faceul">
    <li><img src="log.jpg" /><br /><a href="#">张三</a></li>
    <li><img src="log.jpg" /><br /><a href="#">张三</a></li>
    <li><img src="log.jpg" /><br /><a href="#">张三</a></li>
    </ul>
    </div>
    </div>
</body>

css:

body
{
    margin: 0 auto;
    width: 600px;
    height:400px;
    border: 1px solid blue;}
.div1
{
    width: 350px;
    height: 370px;
    margin-left: 100px;
    margin-top: 20px;}
.span1
{
    
    display: block;}    
.span1 a
{
    float: right;}   


.faceul
{
    width: 350px;
    height: 85px;
    
    list-style-type: none;
    padding: 0;}
.faceul li
{
    float: left;
    width: 107px;
    height: 78px;
    /*background-color: pink;*/
    margin-left: 7px;
    text-align: center;/*表示放在该元素内的其他元素会左右居中*/}
.faceul img
{
    width: 50px;
    margin-top: 5px;
    padding-bottom: 5px;}
    
    
    
/*定义几个常用的字体样式*/    
.font1
{
    font-weight: bold;
    font-size: 20px;
    margin: 2px 0 0 4px;}
/*定义几种超链接的样式*/
a:link
{
    text-decoration: none;}

「已注销」

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
4---css的核心：盒子、浮动+定位

css的核心内容---流标准流/非标准流　　流：在网页中指元素(标签)的排列方式。　　标准流：默认的布局方式。元素在网页中像流水，排在前面的元素(标签)在前面出现，排在后面的在后面出现。　　非标准流：当某个元素(标签)脱离了标准流[比如因为相对定位]排列，我们统称为非标准流排列。(在定位部分详细讲解。在实际操作创建网页时，经常会用到：让某个元素脱离其本身的位置。) 盒子模型
复制链接

扫一扫