CSS笔记(3)

最新推荐文章于 2024-10-16 15:06:44 发布

dont touch me！

最新推荐文章于 2024-10-16 15:06:44 发布

阅读量60

点赞数

文章标签： css 笔记前端

本文链接：https://blog.csdn.net/m0_71067366/article/details/131660754

版权

文章详细阐述了Web布局中的盒子模型，包括水平布局的等式原理，如何处理过度约束，以及外边距的折叠。同时讨论了垂直方向的布局，如内容撑开父元素高度，overflow属性处理溢出，以及行内元素的特性。还提到了浏览器的默认样式对布局的影响及处理方法，并举例展示了京东图片列表和左侧导航栏的实现技巧。

摘要由CSDN通过智能技术生成

1.盒子模型

1.1水平方向的布局

1）一个元素在其父元素中，水平布局必须要满足以下的等式

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=其父元素内容区的宽度（必须满足）

以上等式需要满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整

调整的情况：

1）如果这7个值中没有为auto的情况，则浏览器会自动调整margin-right以使等式满足

2）这三个值由三个可以设置为auto：width、margin-left、margin-right

如果某个值为auto，则会自动调整为auto的哪个值以使等式成立

1）如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0

2）如果将三个值都设置为auto，则外边距都是0，宽度最大

3）如果将两个外边距设置为auto，宽度固定值，则会将两个外边距设置为相同的值

 <style>
        .outer{
            width:800px;
            height:200px;
            border:10px red solid;

            .inner{
                width:200px;
                height:100%;
                background-color: blue;
                margin-left: auto;
                margin-right: auto;
            }
        }
    </style>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body

1.2垂直方向的布局

1) 默认情况下，父元素的高度被内容撑开

2）子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出，使用overflow属性来设置父元素如何处理溢出的子元素

3）可选值：

visible：默认值，子元素会从父元素中溢出，在父元素外部的位置显示

hidden：溢出的内容将会被裁剪不会显示

scroll：生成两个滚动条，通过滚动条来查看完整的内容

auto：根据需要生成滚动条

4）overflow-x/overflow-y：单独处理水平方向和垂直方向的溢出

1.3外边距的折叠

1）外边距的折叠

相邻的垂直方向外边距会发生重叠现象

1）兄弟元素：

元素间的相邻垂直外边距（margin-top和margin-bottom）会取两者之间的较大值（两者都是正值）

特殊情况：如果相邻的外边距一正一负，则取两者的和

如果相邻的外边距都是负值，则取两者中绝对值较大的

兄弟元素之间的外边距的重叠，对于开发是有利的

2）父子元素

父子元素之间相邻外边距，子元素的会传给父元素（上外边距）

父子外边距的折叠会影响到页面的布局，必须要进行处理

1.4行内元素的盒模型

1）行内元素不支持设置宽度和高度

2）行内元素可以设置padding，但是垂直方向padding不会影响页面的布局

3）行内元素可以设置margin，但是垂直方向margin不会影响页面的布局

4）display 用来设置元素显示的类型

可选值：inline 将元素设置为行内元素

block 将元素设置为块元素

inline-block 将元素设置为行内块元素，既可以设置宽度和高度又不会独占一行

table 将元素设置为一个表格

none 元素不在页面中显示

5）visibility 用来设置元素的显示状态

可选值：visible 默认值，元素在页面中正常显示

hidden：元素在页面中隐藏不显示，但是依然占据页面的位置

 <style>
       .box1{
        width: 200px;
        height:200px;
        background-color: blue;
       }
      a{
        display:block;
        width:100px;
        height:100px;
        background-color: blueviolet;
      }
    </style>

<body>
   <a href="javascript:;">超链接</a>
   <a href="javascript:;">超链接</a>
   <div class="box1"></div>
</body>

1.5浏览器的默认样式

1）通常情况下，浏览器都会为元素设置一些默认样式，默认样式的存在会影响页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式（pc端的页面）

2）代码处理

*{
margin:0;
padding:0;
}
ul{
list-style:none;
}

3）重置样式表

专门用来对浏览器的样式进行重叠

reset.css直接去除了浏览器的默认样式

nomalize.css对默认样式进行了统一

1.6京东图片列表

1）重置样式

2）用<ul></ul>和<li></li>标签，每个<li></li>标签里都嵌套一个超链接标签和图像标签

3）CSS：body设置背景颜色；ul用类选择器设置宽度和高度、用overflow的hidden属性裁剪、设置外边距使图像居中、设置背景颜色；li用类选择器设置外边距（每个图像之间由距离）；设置图片的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片列表</title>
   <style>
    *{
        margin:0;
        padding:0;
    }
    body{
        background-color: antiquewhite;
    }
    .img-list{
        width:190px;
        height:595px;
        overflow:hidden;
        margin:50px auto;
        background-color: #f4f4f4;
    }
    .img-list li:not(:last-child){
        margin-bottom: 9px;
    }
    .img-list img{
width: 100%;
    }
   </style>
</head>
<body>
    <ul class="img-list">
        <li>
            <a href="javascript:;">
                <img src="./图片列表/021bb207904608b8.jpg.webp" alt="">
            </a>
        </li>

        <li>
            <a href="javascript:;">
                <img src="./图片列表/55eeeeb5cb43c3b9.jpg.webp" alt="">
            </a>
        </li>

        <li>
            <a href="javascript:;">
                <img src="./图片列表/8c9cb5b27b8eb267.jpg.webp" alt="">
            </a>
        </li>
    </ul>
</body>
</html>

1.7京东左侧导航栏

HTML

1）创建一个外部的容器

2）nav、div里面嵌套div，ul里嵌套li

3）div里面由多个超链接

CSS

4）设置网页背景颜色

5）设置菜单外部容器（宽度、高度、padding内边距、margin内边距）

6）设置容器背景颜色

7）设置菜单内部的item（高度）

8）为item设置一个鼠标移入的状态（hover）

9）要让一个文字在父元素中垂直居中，只需要将父元素的line-height设置为一个和父元素height同样的值

10）设置item的右内边距，将文字向内移动

11）设置超链接的样式（设置字体的颜色、大小、去除下划线（text-decoration:none;)）

12)给item设置字体大小（改变/的大小）

13)设置字体大小

14）设置超链接的hover的颜色样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东左侧导航</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    body{
        background-color: #bfa;
    }
    .left-nav{
        width:190px;
        height:200px;
        padding:10px 0;
        background-color: #fff;
        margin: 50px auto;
    }
    .left-nav .item{
        height:25px;
        line-height: 25px;
        padding-left: 18px;
        font-size:10px;
    }
    .item:hover{
        background-color: #d9d9d9;
    }
    .item a{
        font-size:14px;
        color:#333;
text-decoration:none;
    } 
    .item a:hover{
color:#c81623;
    }
</style>

<body>
    <nav class="left-nav">
        <div class="item">
            <a href="#">家用电器</a>
        </div>

        <div class="item">
            <a href="#">男鞋</a>/<a href="#">运动</a>/<a href="#">户外</a>
        </div>

        <div class="item">
            <a href="#">房产</a>/<a href="#">汽车</a>/<a href="#">汽车用品</a>
        </div>

        <div class="item">
            <a href="#">酒类</a>/<a href="#">生鲜</a>/<a href="#">特产</a>
        </div>

        <div class="item">
            <a href="#">艺术</a>/<a href="#">礼品鲜花</a>/<a href="#">农资绿植</a>
        </div>

        <div class="item">
            <a href="#">医药保健</a>/<a href="#">计生情趣</a>
        </div>

        <div class="item">
            <a href="#">图书</a>/<a href="#">文娱</a>/<a href="#">电子书</a>
        </div>

        <div class="item">
            <a href="#">珠宝</a>/<a href="#">首饰</a>/<a href="#">黄金</a>
        </div>

    </nav>
</body>

</html>