页面布局3大核心
盒子模型、浮动和定位
网页布局基本步骤
- 1先准备相关的网页元素，网页元素基本都是盒子
- 2利用css设置好盒子的样式，然后摆放到响应的位置
- 往盒子里面填充内容
css负责表现
image.png
css最大价值：由html专注做结构呈现，样式交个css，即结构（html）与样式(css)分裂
- CSS简介 ：主要作用美化网页、布局页面。css即层叠样式表(cascading style sheets)或css样式表或级联样式表。
- css基础选择器
- css 字体属性
- css文本属性
- css的引入方式
- chrome调试工具
css语法
css语法主要的部分结构：选择器、一条或多条声明
其中选择器：是用于指定css样式的Html表情，花括内是对该对象设置的具体样式。
image.png
image.png
选择器分类
image.png
- 类选择器使用 html标识。
- 类选择器使用 .（英文点号）进行标识，后面紧跟 类名。
多个选择器
<div class="layui-col-sm12 layui-col-md3 layui-col-lg2">
image.png
- id选择器使用 # 进行标识，后面紧跟id名。
- 通配符选择器
在css中，通配符选择器“*”定义，它表示选取页面中所有元素（标签）
通配符选择器不需要调用，自动被所有元素使用
image.png
css复合选择器
后代选择器、子选择器、并集选择器、伪类选择器
注意：(连接)伪类选择器 顺序是不能变得：link ->visited->hover->active
:focus 伪类选择器用于选取获得焦点的表单元素
css复合选择器
css的元素显示模式
块元素：独占一行
行内元素：css设置高度和宽度是无效的，行内元素只能容纳文本或其他行内元素
行内块元素：<img/> 、<input/>、<td/> 和相邻行内块元素在同一行上，当他们之间有间隙，一行可以显示多个。高度和宽度可以设置
显示模式转换：转换为块元素：display:block;转换为行内元素：display:inline;转为行内块：display:inline-block
image.png
image.png
文字垂直居中：让行高=盒子的高度
css背景
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定、背景颜色半透明等
image.png
css的三大特性：层叠性、继承性、优先性
层叠性（覆盖）：样式冲突时，使用就近原则，哪个样式离结构近，就使用哪个样式
image.png
继承性：子标签回集成父标签的某些样式，比如文本颜色和字体、行高。
image.png
优先性：选择器相同，则执行层叠性；选择器不同，则根据选择器权重执行
css选择器权重
css选择器权重重要
继承权重时0
css选择器权重叠加
css选择器权重叠加
CSS 盒子模型
所谓盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin）组成。
image.png
css浮动float
pc端提供3中css传统的布局方式：普通流（即标准流或文档流）、浮动、定位
为什么需要浮动布局
image.png
image.png
浮动可以改变元素标签默认的排列方式。
注：网页布局第一准则,多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
浮动语法
浮动语法
浮动特性
- 1浮动元素会脱离标准流（脱标）
- 2浮动元素会一行内显示，并且元素顶部对其
- 3浮动的元素会具有行内块的特性
image.png
清除浮动
为什么需要清除浮动？
答：由于父级盒子合同情况下，不方便给高度，但是盒子浮动又不占有位置，最后父盒子高度为0时，就会影响下面的标准盒子。
清除浮动的本质事清除浮动元素造成的影响，如果父盒子本身有高度，则不需要清除浮动。清除浮动之后，父级就会根据浮动的滋贺子自动检测高度。父级有了高度，就不会影响下面的标准流了。
image.png
image.png
清除浮动的方法
- 1额外标签法也称隔墙法，是w3c推荐的做法
- 2父级添加overflow属性
- 3父级添加after伪元素
- 4 父级添加双伪元素
清除浮动例子
css属性书写顺序
css属性书写顺序
css定位
场景1 莫格元素可以自由的在一个盒子内移动位置，并压住其他盒子
场景2 滚动屏幕时，有的元素不想让它滚动
image.png
定位：将盒子定在某一个位置，所有定位也是在摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移
- 静态定位static:元素的默认定位方式，无定位的意思；静态定位特点：按照标准流特性摆放位置，它没有边偏移
- 相对定位relative:是元素在移动位置的时候，是相对于它原来的位置来说（自恋型）；特点原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对代它。它典型的应用是给绝对定位当爹。
image.png
- 绝对定位absolute:是元素在移动位置的时候，是相对于他祖先元素来说的。特点：1如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位（document）;2 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考移动位置；3 绝对定位不在占有原先位置
- 固定定位fixed:是元素固定于浏览器的可视区的位置。主要使用场景：可以在浏览器页面滚动是元素的位置不会发生变化。特点：跟父元素没有关系；不占原来的位置
固定定位小技巧：固定再版心右侧位置
固定再版心右侧位置
image.png
- 粘性定位sticky:可以被认为是相对定位和固定定位的混合。特点：1以浏览器可视窗口为参照点移动元素；2占有原先的位置；3必须添加top/left/right/bottom其中一个才有效果。
定位的几个注意点
- 绝对定位会完全压住盒子，浮动元素不同，只会压住它下面的盒子，但是不会压住下面标准流盒子里面的文字。
image.png
常用工具
snipaste
ps
cutterman
屏幕画笔
fscapture
xmind
SketchUp Pro
网友评论