「学习笔记」CSS基础(2)
「学习笔记」CSS基础(2)
- 一、其他样式
- 1、圆角边框
- 2、盒子阴影
- 3、文字阴影
- 二、浮动
- 1、传统网页布局的三种方式
- 2、标准流(普通流/文档流)
- 3、为什么需要浮动?
- 4、什么是浮动(float)?
- 5、浮动特性
- 6、浮动元素经常和标准流父级搭配使用
- 7、ps使用技巧
- 8、每个盒子中间要缝隙,可以给小盒子加右侧外边距,然后给最右边的盒子单独指定个class清除右侧外边距。如果还是掉下来了,可以f12查看一下,原来是权重的问题。
- 9、网页布局第二准则:先设置盒子大小,之后设置盒子的位置
- 三、常见网页布局
- 浮动布局注意点
- 四、清除浮动
- 1、为什么需要清除浮动?
- 2、清除浮动本质
- 3、清除浮动样式(闭合浮动)
- 4、清除浮动的多种方式
- 4.1、额外标签法
- 4.2、父级添加 overflow 属性
- 4.3、父级添加after伪元素
- 4.4、父级添加双伪元素
- 总结
https://www.bilibili.com/video/BV14J4114768?p=163&spm_id_from=pageDriver
https://mp.weixin.qq.com/s/zhi3cSU0k4DlHLerta9XXQ
一、其他样式
1、圆角边框
在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。
border-radius 属性用于设置元素的外边框圆角。
语法:
border-radius:length;
- 参数值可以为数值或百分比的形式
- 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50%
- 该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角
- 分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius
- 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用
2、盒子阴影
CSS3 中新增了盒子阴影,我们可以使用 box-shadow 属性为盒子添加阴影。
语法:
box-shadow: h-shadow v-shadow blur(影子虚实) spread(影子大小,可以负值) color inset (这个参数空着不写就是外阴影,写上就是内阴影,如果写了outset会不起作用);
盒子阴影不占空间,不会影响布局
所有盒子都可以加:hover {}
3、文字阴影
在 CSS3 中,我们可以使用 text-shadow 属性将阴影应用于文本。
语法:
text-shadow: h-shadow v-shadow blur color;
二、浮动
1、传统网页布局的三种方式
CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序):
普通流(标准流)
浮动
定位
这三种布局方式都是用来摆放盒子的,盒子摆放到合适位置,布局自然就完成了。
注意:实际开发中,一个页面基本都包含了这三种布局方式(后面移动端学习新的布局方式) 。
2、标准流(普通流/文档流)
所谓的标准流: 就是标签按照规定好默认方式排列
- 块级元素会独占一行,从上向下顺序排列。常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
- 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。常用元素:span、a、i、em 等
以上都是标准流布局,我们前面学习的就是标准流,标准流是最基本的布局方式。
3、为什么需要浮动?
总结: 有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式.
浮动最典型的应用:可以让多个块级元素一行内排列显示。
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。
4、什么是浮动(float)?
float 属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法:
选择器 { float: 属性值; }
5、浮动特性
加了浮动之后的元素,会具有很多特性,需要我们掌握的.
1、浮动元素会脱离标准流
(脱标:浮动的盒子不再保留原先的位置)
2、浮动的元素会一行内显示并且元素顶部对齐
(不是居中对齐,只对齐上沿对齐,下沿不管)
注意:
浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。
3、
- 浮动的元素会具有
行内块
元素的特性(例如span是行内元素,不具有宽高属性,只要加了浮动,无需加转换行内块的代码,也可以直接拥有宽高) - 浮动元素的大小根据内容来决定(如果没有指定宽高)
- 浮动的盒子中间是没有缝隙的
6、浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置, 我们网页布局一般采取的策略是:
先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧,父元素管上下,子元素管左右
7、ps使用技巧
按下图步骤,可以把图片放大,然后拖动标尺,最后量2个标尺之间的距离。(适用于屏幕放不下的大图,缩小了直接量距离不好量)
8、每个盒子中间要缝隙,可以给小盒子加右侧外边距,然后给最右边的盒子单独指定个class清除右侧外边距。如果还是掉下来了,可以f12查看一下,原来是权重的问题。
9、网页布局第二准则:先设置盒子大小,之后设置盒子的位置
三、常见网页布局
浮动布局注意点
1、浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
2、一个元素浮动了,理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子,如果其中一个盒子浮动了,其他兄弟也应该浮动,以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.(因为前面的标准流盒子已经独占一行了,后面的浮动盒子只能贴着前面的下沿,并不会影响前面的盒子,浮动只会盖在后面的标准流上,不会盖在前面的标准流)
盒子排列顺序从前到后:粉色(标准流)——绿色(浮动)——橙色(标准流)
绿色的浮动贴着粉色下沿,但是压住后面的橙色
盒子排列顺序从前到后:粉色(浮动)——绿色(标准流)——橙色(浮动)
粉色的浮动压住后面的绿色,但是因为绿色是标准流,所以绿色后面的橙色贴在绿色下面
原先:大毛标准流,二毛浮动,三毛标准流
现在:大毛浮动,二毛标准流,三毛浮动
二毛被压在大毛下面,文字被挤出来了,三毛上沿贴着二毛,左侧被大毛挤开
代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>浮动注意点</title><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></html>
四、清除浮动
1、为什么需要清除浮动?
由于父级盒子很多情况下,不方便给高度(例如文章、商品列表等),但是子盒子浮动又不占有位置(标准流的子盒子是会撑开父盒子的,但是浮动不占位置不会撑开,父盒子又不指定高度,父盒子就会变成高度0),最后父级盒子高度为 0 时,就会影响下面的标准流盒子。
2、清除浮动本质
- 清除浮动的本质是清除浮动元素造成的影响:浮动的子标签无法撑开父盒子的高度
- 如果父盒子本身有高度,则不需要清除浮动
清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了
3、清除浮动样式(闭合浮动)
语法:
选择器{clear:属性值;}
我们实际工作中, 几乎只用 clear: both;
清除浮动的策略是: 闭合浮动.
类似于关门打狗,把浮动的子盒子关在家里
4、清除浮动的多种方式
4.1、额外标签法
额外标签法也称为隔墙法,是 W3C 推荐的做法(但是实际开发不常用)。
使用方式:
额外标签法会在浮动元素末尾添加一个空的标签。
例如 <div style="clear:both"></div>,或者其他标签(如<br />等)。
优点: 通俗易懂,书写方便
缺点: 添加许多无意义的标签,结构化较差
注意: 要求这个新的空标签必须是块级元素,不能是行内元素。
总结:
1、清除浮动本质是?
清除浮动的本质是清除浮动元素脱离标准流造成的影响
2、清除浮动策略是?
闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.
3、额外标签法?
隔墙法, 就是在最后一个浮动的子元素后面添加一个额外标签, 添加 清除浮动样式.实际工作可能会遇到,但是不常用
4.2、父级添加 overflow 属性
可以给父级添加 overflow 属性,将其属性值设置为 hidden、 auto 或 scroll 。
例如:
overflow:hidden | auto | scroll;
优点:代码简洁
缺点:无法显示溢出的部分
注意:是给父元素添加代码
4.3、父级添加after伪元素
:after 方式是额外标签法的升级版。给父元素添加:
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 专有 */ *zoom: 1;}
优点:没有增加标签,结构更简单
缺点:需要照顾低版本浏览器
代表网站: 百度、淘宝网、网易等
4.4、父级添加双伪元素
给父元素添加
.clearfix:before,.clearfix:after {content:"";display:table; }.clearfix:after {clear:both;}.clearfix {*zoom:1;}
优点:代码更简洁
缺点:需要照顾低版本浏览器
代表网站:小米、腾讯等
上面2种伪元素直接
class="clearfix"
给父元素调用即可
总结
为什么需要清除浮动?
- 父级没高度。
- 子盒子浮动了。
- 影响下面布局了,我们就应该清除浮动了。
「学习笔记」CSS基础(2)相关推荐
- 「学习笔记」品优购项目-上(页面公共部分 )
「学习笔记」品优购项目-上 品优购项目-上 目标 品优购项目规划 网站制作流程 品优购项目介绍 品优购项目的学习目的 开发工具以及技术栈 开发工具 技术栈 品优购项目搭建工作 创建的文件夹如下(称为项 ...
- 「学习笔记」移动Web开发之rem适配布局10
「学习笔记」移动Web开发之rem适配布局10 一.rem单位 1.1 rem 单位 二.媒体查询 2.1 什么是媒体查询 2.2 语法规范 2.2.1 mediatype 查询类型 2.2.2 关键 ...
- 「学习笔记」黑马面面布局开发
「学习笔记」黑马面面布局开发 黑马面面布局开发 一.目的 1.1 技术方案 1.2 代码规范 1.2 目录规范 二.流程开发 2.1 蓝湖/摹客协作平台 2.2 适配方案 2.3 初始化文件 2.4 ...
- 「学习笔记」移动Web开发之flex布局9
「学习笔记」移动Web开发之flex布局9 一.flex布局体验 1.1 传统布局与flex布局 1.2 初体验 二.flex布局原理 2.1 布局原理 三.flex布局父项常见属性 3.1 常见父项 ...
- 「学习笔记」HTML5CSS3提高6(上)
「学习笔记」HTML5&CSS3提高6(上) HTML5新特性 概述 语义化标签 (★★) 多媒体标签 视频标签- video(★★★) 基本使用 兼容写法 video 常用属性 音频标签- ...
- 「学习笔记」多项式的蛇皮操作
文章目录 「学习笔记」多项式的蛇皮操作 前置知识 趋近 自然常数 对数 逆元 导函数 牛顿迭代与泰勒公式 不定积分与定积分 多项式乘法 多项式求逆元 多项式除法/取模 多项式牛顿迭代法 多项式开根 「 ...
- CSS学习笔记(一) CSS基础+CSS3新特性
思维导图 文章目录 思维导图 1. CSS 简介 2. CSS 引入方式 2.1 行内样式表 2.2 内部样式表 2.3 外部样式表 2.4 CSS 引入方式总结 3. CSS 选择器 3.1 CSS ...
- 「学习笔记」ISAP求最大流
ISAP学习笔记 ISAP是OI中求最大流的常用方法之一.相对于Dinic,ISAP的速度提升了很多,但编码复杂度也上升了不少. 约定 采用邻接表存储图,对于每条弧,增加一条容量为0的逆向边. d数组 ...
- 字符串输出为什么第一个没了_「课堂笔记」Python基础语法:变量和输入输出
学习了视频课程<财务Python基础--财务人的第一个Python程序|输入输出>,小编特为大家整理了本节内容的文字版笔记,一起来温故知新吧~~ 变 量 一.为什么要引入变量? 在信息计算 ...
- 「学习笔记」Vue 官方视频教程 2.0版
文章目录 Vue 实例 数据与方法 生命周期钩子 模版语法 插值 指令(directives) 缩写 v-bind 缩写 v-on 缩写 计算属性和监听器[[没看]] Class 与 Style 绑定 ...
最新文章
- python中的变量、Debug和数据类型
- 遇见BUG(2)去掉你的增量编译使能!
- Spring data redis应用示例
- linux 查端口 三种,Linux查看端口常用的三种用例
- 能力素质模型咨询工具(Part 2)
- js实现无缝循环滚动
- Annotation之二:@Inherited注解继承情况
- python交并补_python两个列表求交、并、差
- HDU 3861 The King’s Problem (强连通缩点+DAG最小路径覆盖)
- javascript核心_只需几分钟即可学习这些核心JavaScript概念
- Fiddler软件基本配置教程
- python信道仿真_Hanlp在Python环境中安装及使用.md
- 清华大学2008年硕士生招生参考书目录
- DDOS防御流量清洗的解决方案,流量清洗服务有什么功能?
- 【转载】三方框架整理
- 初学者最容易学的六种编程语言
- Hibernate源码解析
- java faker_小飞博客-java测试造数据神器JavaFaker
- 计算机编程领域最伟大的20个发明
- 《 iOS-checkIPA 》ipa 文件信息检查工具
热门文章
- excel图表配合下拉菜单_从下拉列表中选择Excel图表日期
- redis数据类型之HashSet
- tex常用函数 上下行对齐_latex 部分右对齐
- Java学习到什么程度可以找第一份工作?
- 计算机怎么接入外接键盘,无线键盘怎么连接电脑 享受无线惬意生活【图文】...
- 用form表单提交时,出现415错误
- matlab仿真高尔顿正态分布源码,童年趣话:从弹珠台到高斯分布
- hdmi接口线_HDMI高清线不能随便买,这五点要记住
- vba批量合并指定的sheet_用VBA实现把多个Excel文件合并到一个Excel文件的多个工作表(Sheet)里...
- php网站访问卡顿,网站反应慢,经常卡顿是什么原因?怎么解决?