web前端css(二)
一. 标准文档流
标准文档流中会有一些现象: 空白折叠 和 高低不齐边底对齐的现象
标准文档流等级森严, 标签分为两种等级: 行内元素 和 块级元素.
1. 行内元素 和 块级元素的区别:
行内元素:不能设置宽高, 默认的宽度就是文字的宽度; 与其他行内元素并排
块级元素:设置宽高, 如果不设置就默认宽度是父级的100%; 独占一行,不与其它任何元素并列
2. 标签分类
在HTML中已经将标签分过类了,当时分为文本级 和 容器级
a) 从HTML的角度来讲,标签分为:
文本级标签: p, span, a, u下划线, i斜体(已废弃), em斜体(已废弃), b粗体(已废弃)
容器级标签: div, li, dt, dd, h系列
这里为什么说p是文本级标签呢? 因为p里面只能放 文字, 图片, 表单.
P里不能放h系列, 不能放ul 也不能放p.
b) 现在从css角度看和上面很像,就p不一样:
行内元素: 除了p之外,所有的文本级标签都是行内元素. P是文本级标签但是是个块级元素
块级元素:所有的容器级标签 div lid dt dd h, 还有 p 标签
3. 块级元素和行内元素的转换
我们可以通过display属性将块级元素和行内元素相互转换
块级元素转行内元素: 设置display:inline;
行内元素转块级元素: 设置display:block;
4. 脱离标准文档流
标准文档流的限制非常多,导致很多页面效果无法实现. 如果我们想要并排而且要设置宽高(行内元素不能设置宽高的), 那么就需要浮动, 脱离标准文档流.
二. 浮动
浮动是css里面布局最多的一个属性,也是很重要的一个属性. float表示浮动,有以下的属性值:
float: none; 不浮动,默认
left 左浮动
right 右浮动
浮动要想学好,就得知道浮动的四大特性:
- 浮动的元素脱标(就是脱离标准文档流), 标签一旦设置浮动,就能够并排了. 而且不再区分行内元素和块状元素, 都可以设置宽高
- 浮动的元素会相互贴靠
- 浮动的元素有”字围”效果
- 收缩的效果,就是一个浮动元素如果没有设置width, 那么就自动收缩为文字的宽度(这点和行内元素很像)
三. 清除浮动
先看一个html和css的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 1126px; }
.box1{
width: 200px;
height: 200px;
float: left;
background-color:pink;
}
.box2{
width: 100px;
height: 100px;
float: left;
background-color:red;
}
.box3{
width: 200px;
float: left;
height: 100px;
background-color:grey;
}
.father2{
width: 1126px;
height: 400px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="father">
f1
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
<div class="father2">f2</div>
</body>
</html>
效果是如果不给父盒子一个高度的话, 那么浮动的子元素是不会填充父盒子的高度, 此时.father2 的盒子就跑到第一个位置上去了, 影响页面的布局.
浮动可以实现页面元素并排的效果, 这是好处, 但是会影响布局, 所以我们要清除浮动.
清除浮动有4种方式:
- 给父盒子设置高度
- 内墙法(给浮动元素的后面加一个块级标签,再给这个标签设置clear:both属性)
- 伪元素清除法(常用)
- overflow: hidden(常用)
应用: 伪元素清除浮动的写法:
给浮动元素的父盒子, 就是不浮动的元素添加一个clearfix类,然后设置如下:
.clearfix{
content:.;
display:block;
height:0;
visibility:hidden;
clear:both;
}
关于overflow: 值
|
值 |
描述 |
|
visible |
默认值,内容不会被修剪,会呈现在元素框之外 |
|
hidden |
内容会被修剪,超出元素之外的部分不可见 |
|
scroll |
不管内容是否超出元素框都会出现滚动条 |
|
auto |
如果内容超出元素框,则浏览器会显示滚动条以便查看其余内容 |
|
inherit |
规定继承父类元素的overflow属性值 |
逐渐演变成了overflow:hidden清除法
其实它是一个BFC区域, 具体参见：https://blog.csdn.net/riddle1981/article/details/52126522
四. Margin中的坑
- Margin塌陷问题
当给两个标准流下的兄弟盒子设置垂直方向上的margin时候,那么以较大的值为准,那么我们称这种现象叫塌陷. 记住这种现象在布局垂直方向盒子的时候要注意margin的用法. 水平方向上没有塌陷
当我们给两个标准流下的兄弟盒子设置浮动之后,就不会出现塌陷问题了
- margin: 0 auto;
当一个div元素设置margin:0 auto; 之后盒子就会居中, 这表示上下外边距是0, 左右为auto的距离, 那么auto是什么意思呢?若设置margin-left:auto; 我们就会发现盒子尽可能大的右边有很大距离,没有什么意义. 同理,若设置margin-right:auto;盒子会尽可能大的左边有很大距离,当两条语句并存的时候,盒子尽可能大的左右两边有很大的距离,此时就居中了.
注意:
- 使用margin:0 auto; 的时候, 水平居中的盒子必须有width, 要有明确的width值
- 如果给盒子设置浮动, 或者固定定位, 或者绝对定位, 那么margin:0 auto就失效了
- Margin: 0 auto是使盒子居中而不是文本居中, 文字水平居中使用text-align:center
- 善于用父级的padding,而不是margin
另外一定要知道margin属性是兄弟盒子之间的, padding是父子盒子之间的
先看一下下面的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width:300px;
height:300px;
background-color:blue;
}
.son{
width:100px;
height:100px;
background-color:orange;
margin-top:10px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
运行上面的代码发现, 两个盒子整体下移动了30px, 其实我们是想让子盒子下移动30px, 父盒子不动, 但因为父盒子没有border, 所以父盒子也掉下来了. 一旦给父盒子加上border之后就可以了. 那么问题来了, 我们不可能无缘无故给父盒子加一个border啊, 所以此时解决的方法只有一个就是使用父盒子的padding, 让子盒子往下移动
五. 字体图标使用
阿里巴巴矢量图标库
web前端css(二)的更多相关文章
- Web前端-CSS必备知识点
Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...
- WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
- 零基础学WEB前端-CSS
CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...
- web前端—css面试题
1.CSS 选择符有哪些? 2.CSS 优先级的选择过程? 优先级复合就近原则,同权重的情况下有限选择最近的属性. 载入样式的话是以最后载入的定位为准. 优先级: !important > id ...
- QQ群web前端分析二——第一印象
对QQ群WEB进行前端分析 入口是 http://qun.qzone.qq.com/ 以下为第一印象,主要是从我的理解上找问题. ----------------------------------- ...
- Bootstrap 简介(Web前端CSS框架)
目录1.简介2.特点3.组件4.Javascript插件5.定制自己的框架代码6.Bootstrap Less 1.简介Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Tw ...
- Bootstrap（Web前端CSS框架）
官方定义: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile fi ...
- web前端——CSS详解
简介 CSS(Casading Style Sheet)是一组HTML元素外观的设置规则,用于控制web页面的表现形式,一般被翻译为"级联样式表"或"层叠样式表" ...
- [Web 前端] CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...
随机推荐
- CentOS 7.3 源码安装apache 2.4.16配置基于域名的虚拟主机
主配置文件末尾添加一条配置: [root@vm2 ~]# vim /usr/local/apache/conf/httpd.conf Include conf/vhosts.conf 在conf目录下 ...
- wpf 换行符
方法1: <TextBlock Text="第一行 第二行"/>文字中间加上: 就可以了.这个方法很有用,也可以用在ToolTip上:<ToolTip Width ...
- [UWP-小白日记16]UWP中的3D变换API
原文:[UWP-小白日记16]UWP中的3D变换API 还没开始 好久没写博客了,再来开坑. 正文 Transform3D:“这个和CSS的3D好像的说” PerspectiveTransform3D ...
- SMC状态机笔记
%class 状态机所作用的类 %package 类所在的包 %fsmclass 生成类的类名 %fsmfile 生成类的文件名 %access 生成类的可访问级别 %start 指定状态机的开始状态 ...
- error C2760: 语法错误: 意外的令牌“标识符”，预期的令牌为“类型说明符”
解决办法: 打开项目工程----> 属性 ---> c/c++ --> 语音 --> 符合模式 修改成否即可
- Android零基础入门第48节：可折叠列表ExpandableListView
原文:Android零基础入门第48节:可折叠列表ExpandableListView 上一期学习了AutoCompleteTextView和MultiAutoCompleteTextView,你已经 ...
- BackgroundWorker 简单使用教程 多个线程的创建
原文:BackgroundWorker 简单使用教程 多个线程的创建 BackgroundWorker是一个非常不错的线程控件,能避免界面假死,让线程操作你想要做的事,它学习起来很简单,但是能实现很强 ...
- Linux之文件的压缩与解压缩
压缩格式 .zip,.rar,.7z,.tar,.gz,.xz,.bz2,.tar.gz,.tar.xz,.tar.bz2,其中,形如*.tar.gz为tar打包,gz压缩的文件 zip压缩打包程序 ...
- Ubuntu Linux服务器搭建SSL/TLS(https)（在StartSSL可以得到免费证书）
目录 1 生成公钥和私钥对 2 公钥提交到CA机构签发一个crt证书 3 配置证书链 4 在Apache里开启SSL支持并配置crt证书和私钥 5 配置HSTS (可选) 6 总结 首先SSL/TLS ...
- 所有W版本的函数都在wchar.h文件（_wfopen），和stdlib.h文件（wcstombs），和stdio.h文件（vwprintf）
C:\Qt\Qt5.6.2\Tools\mingw492_32\i686-w64-mingw32\include\wchar.h C:\Qt\Qt5.6.2\Tools\mingw492_32\i68 ...