css笔记--4

Xayda~

已于 2023-07-16 23:49:28 修改

阅读量52

点赞数

文章标签： css 笔记前端

于 2023-07-16 23:49:06 首次发布

本文链接：https://blog.csdn.net/2303_78650625/article/details/131756656

版权

一，垂直方向的布局

父元素的高度不指定默认就会被子元素撑开（子元素多高父元素多高）
定义了高度则就是定义了的高度
没有水平方向必须满足的等式，比较简单

子元素是在父元素的内容区中排列的，若子元素的高度超过了父元素的高度，则子元素会从父元素的内容区溢出。
使用overflow属性来设置父元素如何处理溢出的子元素
overflow:visible;未设置时此为默认值设置了也是即子元素会从父元素中溢出
overflow:hidden;溢出的内容不会显示(这种方式不太好)
overflow:scroll;生成两个垂直和水平滚动条，可以查看整个内容
overflow:auto;根据需要生成滚动条，比scroll灵活
overflow-x:设置水平方向的溢出
overflow-y:设置垂直方向的溢出

<style>
        .box1{
            width: 200px;
            height: 200px;
            background-color:rgb(255, 188, 170);
            border: black solid 5px;
        }
        .box2{
            width: 50px;
            height: 300px;/*子元素比父元素高度高*/
            background-color:rgb(94, 255, 0);
            overflow: auto;/*根据需要提供滚动条*/
        }
        </style>
<body>
    <div class="box1">
        <div class="box2">xayda xayda  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            yyyyyyyyyyyyyyyyyyyyyyy  dddddddddddddddddddddddddddd
    aaaaaaaaaaaaaaaaaaaa </div>
    </div>
    </body>

二，外边距的折叠

垂直外边距的重叠（折叠）
相邻的垂直方向的外边距会发生重叠方向
1.兄弟元素
重叠的外边距会取较大的外边距值
特殊情况：一正一负取两者相加两者都为负值取绝对值较大的
注：兄弟元素外边距的重叠，是对开发有利的，不用太过修改

 <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color:#bfa;
            margin-bottom: 50px;/*下边距 使该元素的下方元素向下移动*/
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color:blue;
            margin-top: 50px;/*上边距 使该元素向下移动*/
        }
        </style>
<body>
    <div class="box1"></div>
    <div class="box2"> </div>
</body>

一个元素设置了下外边距，一个元素设置了上边距，理应元素直接距离应该是两者相加50+50=100(px) 但是由于外边距的重叠只能显示50px 如图
中间为50而不是100px，两个元素是兄弟元素，会去取较大值。

2.父子元素
相邻外边距上边距子元素会传递给父元素
即：给子元素设置外边距父元素也会有相同外边距一起移动
父子元素的重叠会影响页面布局，我们需要进行处理。

问题如图：想要让蓝色的子元素向下移动到绿色父元素的底部

.box1{
    width: 200px;
    height: 200px;
    background-color:#bfa;
}
.box2{
    width: 100px;
    height: 100px;
    background-color:blue;
    margin-top: 100px;/*设置一个上外边距*/
}

.clearfix::before,
.clearfix::after{
content:'';/* content 为before after伪元素内添加元素  这里指添加一个空*/
display:table;/*表格 也可以理解把伪元素行内元素转为块元素*/
clear：both;/*消除高度塌陷的影响*/
}

三，行内元素的盒子模型

块状元素如div 行内元素如span 超链接
行内元素特点：
不支持设置宽度width和高度height
可以设置padding（内边距） border（边框）margin（外边距）
但是在垂直方向不会影响页面的布局，即只对水平上起作用。
水平上的总的距离都是相加值，不像垂直方向外边距那样麻烦。
如果非要设置行内元素的宽高
则可以用display：显示元素的类型

display:inline 将元素设置为行内元素
display:block 将元素设置为块状元素
display:inline-block 将元素设置为行内块元素
行内块元素既可以设置宽度和高度，又不会独占一行，使一行中还可以有其他的元素。但行内块元素也兼具了两者的缺点，开发时少用。
4.display:table 将元素设置为一个表格
5.display:none 将元素不在页面中显示，不会占据页面的位置。

效果如图，转化为块状元素即可设置它的宽和高

四，浏览器的默认样式

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

2）代码处理

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

3）重置样式表

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

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

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

五，京东图片列表

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: hsl(133, 69%, 42%);
    }
    .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="C:\Users\沙依旦木.阿布拉\Desktop\34c6d70b444634eb.jpg.avif" alt="">
            </a>
        </li>
 
        <li>
            <a href="javascript:;">
                <img src="C:\Users\沙依旦木.阿布拉\Desktop\59d1f9a282bb6c8c.png!cc_290x370.avif" alt="">
            </a>
        </li>
 
        <li>
            <a href="javascript:;">
                <img src="C:\Users\沙依旦木.阿布拉\Desktop\dc9928f36ad174e8.png!cc_290x370.avif"alt="">
            </a>
        </li>
    </ul>
</body>
</html>

六，京东左侧导航栏

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的颜色样式

Xayda~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css笔记--4

父元素的高度不指定默认就会被子元素撑开（子元素多高父元素多高）定义了高度则就是定义了的高度没有水平方向必须满足的等式，比较简单子元素是在父元素的内容区中排列的，若子元素的高度超过了父元素的高度，则子元素会从父元素的内容区溢出。使用overflow属性来设置父元素如何处理溢出的子元素未设置时此为默认值设置了也是即子元素会从父元素中溢出溢出的内容不会显示(这种方式不太好)生成两个垂直和水平滚动条，可以查看整个内容根据需要生成滚动条，比scroll灵活。
复制链接

扫一扫