前端——CSS（四）

最新推荐文章于 2024-06-12 11:20:23 发布

汕头牛肉丸

最新推荐文章于 2024-06-12 11:20:23 发布

阅读量53

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_41545646/article/details/110010540

版权

1. 浮动（float）
1.1 传统网页布局的三种方式
网页布局的本质——用CSS来摆放盒子，把盒子摆放到相应位置。
CSS提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序）。
·普通流（标准流）
·浮动
·定位
这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了
注意： 实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式）
1.2 标准流（普通流/文档流）
所谓标准流：就是标签按照规定好默认方式排列
1.块级元素会独占一行，从上向下排列顺序
·常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
·常用元素：span、a、i、em等
以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。
1.3 为什么需要浮动
提问：我们用标准流能很方便的实现如下效果吗？
1.如何让多个块级元素盒子水平排列成一行？
比较难，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制
在这里插入图片描述
2.如何实现两个盒子的左右对齐？

总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式
浮动最典型的应用：可以让多个块级元素一行内排列显示
网页布局第一准则： 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
1.4 什么是浮动？
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：

选择器 {float: 属性值;}

在这里插入图片描述

 <style>
        .left,
        .right {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .right {
            float: right;
        }
    </style>
</head>

<body>
    <div class="left">左青龙</div>
    <div class="right">右白虎</div>
</body>

1.5 浮动特性（重难点）
加了浮动之后的元素，会具有很多特性，需要我们掌握的
1.浮动元素会脱离标准流（脱标）
2.浮动的元素会一行内显示并且元素顶部对齐
3.浮动的元素会具有行内块元素的特性。
** 设置了浮动（float）的元素最重要的特性：**
1.脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标
2.浮动的盒子不再保留原先的位置

  <style>
        /* 设置了浮动的元素会：
        1.脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标
        2.浮动的盒子不再保留原先的位置 */
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: rgb(0, 153, 255);
        }
    </style>
</head>

<body>
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
</body>

在这里插入图片描述
如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列

 <style>
        div {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .two {
            height: 300px;
            background-color: purple;
        }

        .four {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div class="two">2</div>
    <div>3</div>
    <div class="four">4</div>
</body>

注意： 浮动的元素是互相贴靠在一起的（不会有缝隙的），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
浮动元素会具有行内块元素的特性
任何元素都可以浮动，不管原先是什么元素的，添加浮动之后具有行内块元素相似的特性。

<style>
        /* 任何元素都可以浮动，不管原先是什么元素，添加浮动之后具有行内块元素相似的特性 */
        span,
        div {
            float: left;
            width: 200px;
            height: 100px;
            background-color: pink;
        }

        /* 如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度 */
        p {
            float: right;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <span>1</span>
    <span>2</span>
    <div>div</div>
    <p>p</p>
</body>

·如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动之后，它的大小根据内容来决定
·浮动的盒子中间是没有缝隙的，是紧挨着一起的
·行内元素同理
1.6 浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，我们网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
在这里插入图片描述

 <style>
        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: purple;
        }

        .right {
            float: left;
            width: 992px;
            height: 615px;
            background-color: skyblue;
        }

        .right>div {
            float: left;
            width: 234px;
            height: 300px;
            background-color: pink;
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左青龙</div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
</body>

网页布局第二准则：先设置盒子大小，之后设置盒子的位置
2. 常见的网页布局
2.1 常见的网页布局
在这里插入图片描述

  <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .top {
            height: 50px;
            background-color: gray;
        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;
        }

        .box {
            width: 980px;
            height: 300px;
            margin: 0 auto;
            background-color: pink;
        }

        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: gray;
            margin-right: 10px;
        }

        .box .last {
            margin-right: 0;
        }

        /* 只要是通栏的盒子（和浏览器一样宽），不需要制定宽度 */
        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>

2.2 浮动布局注意点
1.浮动和标准流的父盒子搭配
先用标准流的父元素排列上下元素位置，之后内部子元素采取浮动排列左右位置。
2.一个元素浮动了，理论上其余的兄弟元素也要浮动
一个盒子里面有很多个盒子，如果其中一个盒子浮动了，那么其他兄弟盒子也应该浮动，以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

<style>
        /* 如果一个子元素浮动了，尽量其他盒子也浮动，这样保证这些子元素一行显示 */
        .box {
            width: 900px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            /* float: left; */
            width: 200px;
            height: 150px;
            background-color: red;
        }

        .sanmao {
            float: left;
            width: 300px;
            height: 240px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="sanmao">三毛</div>
    </div>
</body>

3. 清除浮动
3.1 为什么需要清除浮动？
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面标准流盒子。
在这里插入图片描述
·由于浮动元素不再占有原文档流的位置，所以它对后面的元素排版产生影响。
3.2 清除浮动本质
·清除浮动的本质就是清除浮动元素造成的影响
·如果父盒子本身有高度，则不需要清除浮动
·清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。
语法：

选择器{clear: 属性值}

在这里插入图片描述
我们实际工作中，几乎只用clear: both;
清除浮动的策略：闭合浮动
3.3 清除浮动方法
1.额外标签法也称为隔墙法，是W3C推荐的做法
2.父级添加overflow属性
3.父级添加after伪元素
4.父级添加双伪元素
3.3.1 清除浮动——额外标签法
额外标签法也称为隔墙法，是W3C推荐的做法
额外标签法会在浮动元素末尾添加一个空的标签，例如< div style=“clear:both”>< /div>,或者其它标签（如< br/>等）
·优点：通俗易懂，书写方便
·缺点：添加许多无意义的标签，结构化较差
注意： 要求这个新的空标签必须是块级元素
3.3.2 清除浮动——父级添加overflow
可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。
·优点：代码简介
·缺点：无法显示出溢出的部分

  <style>
        .box {
            /* 清除浮动 */
            overflow: hidden;
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

3.3.3 清除浮动——:after伪元素法
：after方式是额外标签法的升级版，也是给父元素添加的
语法：

.clearfix:after {
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix{	/*IE6、7专有*/
	*zoom:1;
}

·优点：没有增加标签，结构更简单
·缺点：照顾低版本浏览器
·代表网站：百度、淘宝网、网易等
3.3.3.4 清除浮动——双伪元素清除浮动
也是给父元素添加

.clearfix:before,.clearfix:after {
	content:"";
	display:table;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	*zoom:1;
}

·优点：代码更简洁
·缺点：照顾低版本浏览器
·代表网站：小米、腾讯等
3.4 清除浮动总结
为什么要清除浮动？
1）父级没高度
2）子盒子浮动了
3）影响下面布局，应该清除浮动
在这里插入图片描述
4. PS切图
4.1 常见的图片格式

PS有很多的切图方式：图层切图、切片切图、PS插件切图等。
4.2 图层切图
最简单的切图方式：右击图层→快速导出为PNG
但是很多情况下，我们需要合并图层再导出：
1.选中需要的图层（按住shift选取多张图），图层菜单→合并图层（CTRL+e）
2.右击→快速导出为png
4.3 切片工具
1.利用切片选中图片
·利用切片工具手动划出
2.导出选中的图片
文件菜单→导出→存储为web设备所用格式→选择我们要的图片格式→存储
4.3 PS切图工具
Cutterman是一款运行在Photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工“导出web所用格式”以及使用切片工具进行挨个切图的繁琐流程。
注意： Cutterman插件要求ps必须是完整版的，不能使绿色版的
5. 学成在线案例
5.1 准备素材和工具
1.学成在线PSD源文件
2.开发工具=PS（切图）/cutterman插件+vscode（代码）+chrome（测试）
5.2 案例准备工作
我们本次采取结构与样式相分离思想：
1.创建study目录文件夹（用于存放我们这个页面的相关内容）
2.study目录内新建images文件夹，用于保存图片。
3.新建首页文件index.html（以后我们的网站首页统一命名为index.html）
4.新建style.css样式文件，我们本次采用外链样式表
5.将样式引入到我们的HTML页面中
6.样式表写入清除内外边距的样式，来检测样式表是否引入成功
5.3 CSS属性书写顺序（重点）
建议遵循以下顺序：
1.布局定位属性：display/position/float/clear/visibility/overflow（建议display第一个写，毕竟关系到模式）
2.自身属性：width/height/margin/padding/border/background
3.文本属性：color/text-decoration/text-align/vertical-align/white-space/break-word
4.其他属性（css3）：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient
在这里插入图片描述
5.4 页面布局整体思路
为了提高网页制作的效率，布局时通常由以下整体思路：
1.必须确定页面的版心（可视区），我们测量得知。
2.分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则。
3.一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则。
4.制作HTML结构。我们还是遵循，先有结构，后有样式的原则，结构永远最重要
5.所以，先理清楚布局结构，再写代码尤为重要，这需要我们多写多积累
5.5 确定版心
这个页面的版心是1200像素，每个版心都要水平居中对齐，可以定义版心为公共类：

.w {
    width: 1200px;
    margin: 0 auto;
}

5.6 头部制作
在这里插入图片描述
·1号版心盒子header1200*42的盒子水平居中对齐，上下给一个margin值就可以
·版心盒子里面包含2号盒子logo
·版心盒子里面包含3号盒子nav导航栏
·版心盒子里面包含4号盒子search搜索框
·版心盒子里面包含5号盒子user个人信息
·注意：要求里面4个盒子必须是浮动
导航栏注意点：
实际开发中，我们不会直接用链接a而是用li包含链接（li+a）的做法。
1.li+a语义更清晰，一看就是有条理的列表型内容
2.如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名
注意：
1.让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示
2.这个nav导航栏可以不给宽度，奖来可以继续添加其余文字
3.因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度
5.7 banner制作
在这里插入图片描述
·1号盒子是通栏的大盒子banner，不给宽度，给高度，给一个蓝色背景
·2号盒子是版心，要水平居中对齐
·3号盒子版心内，左对齐subnav侧导航栏
·4号盒子版心内，右对齐course课程
5.8 精品推荐小模块

·大盒子水平居中goods精品，注意此处有个盒子阴影
·1号盒子是标题H3左侧浮动
·2号盒子里面放链接左侧浮动，goods-item距离可以控制链接的左右外边距（注意行内元素只给左右内外边距）
·3号盒子右浮动mod修改
5.9 精品推荐大模块
在这里插入图片描述
·1号盒子为最大的盒子，box版心水平居中对齐
·2号盒子为上面部分，box-hd–里面左侧标题h3左浮动，右侧链接a右浮动
·3号盒子底下部分，box-hd–里面是无序列表，有10个小li组成
·小li外边距问题，这里有个小技巧：给box-hd宽度为1215就可以一行装开5个li
5.10 底部模块
在这里插入图片描述
·1号盒子是通栏大盒子，底部footer给高度，底色是白色
·2号盒子版心水平居中
·3号盒子版权copyright左对齐
·4号盒子链接组links右对齐

汕头牛肉丸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端——CSS（四）

1. 圆角边框（重点）在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变成圆角了。boeder-radius属性用于设置元素的外边框圆角语法：border-radius:length;radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果 <style> div { width: 300px; height: 150px; background-color: pink;
复制链接

扫一扫