网页布局基础一

一.网页布局

三大核心

1. 盒子模型
2. 浮动
3. 定位

本质

利用css摆盒子

三步

1. 准备好标签，网页元素基本都是盒子
2. 设置盒子(标签)样式和位置（核心）
3. 盒子里装内容

盒子模型组成

1. content：内容
2. padding：内边距
3. border：边框
4. marigin：外边距，控制两个盒子距离，默认挨着

二.选择器

css语法：选择器 { n*键值对;}

基础选择器

1. 标签选择器："#"
2. 类选择器："."

//多类名使用方法：类名中间空格隔开
<div class="red font">小红</div>

3. id选择器:一次只选择1个标签，一般和js搭配
4. 通配符选择器："*",特殊情况使用

//消除所有的元素标签的内外边距
*{
margin:0;
padding:0;
}

复合选择器

对基础选择器进行组合

1. 后代选择器:儿子，孙子，曾孙子…

//标签之间用空格隔开
//ol下叫li的儿子，孙子，曾孙子
ol li { } 


//以下两种写法一样
ol li a { }
ol a { }

2. 子类选择器:亲儿子

.nav>a { }

3. 并集选择器：集体声明

// 约定的语法规定，并集选择器喜欢竖着写
div,
p,
.pig li { }

4. 伪类选择器：向某些选择器添加特殊效果 “:”

类型	解释
a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择鼠标按下未弹起的链接

三.元素显示模式

作用

更好布局网页

概念

元素(标签)以什么方式显示

分类及特点

类型	特点	举例
块元素	1 独占一行 2 宽高内外边距可控 3 宽默认100% 4 是一个容器盒子，里面可放置行内元素和块元素
行内元素	1 相邻行内元素在一行上，一行可显示多个 2 宽高设置无效 3 默认宽度为本身内容 4 行内元素只能容纳文本和其他行内元素
行内块元素	1 一行可多个 2 默认宽度为本身内容 3 宽高内外边距可控	<img/> <input/> <td/>
特殊	1 <a>里可放块元素，但是最安全是给<a>转为块级模式

显示模式的转换

转换	语法
转为块级元素	display:block
转为行内元素	display:inline
转为行内块元素	display:inline-block

四.字体

文本属性

属性	概念
font-size	字号，单位px
font-family	字体
font-weight	加粗 700/bold 不加粗 400/normal
font-style	italic 倾斜 normal 正常

文本外观样式

属性	概念
color	文字颜色
text-align	对齐方式 left/center/right
text-indent	缩进 text-indent:2em
line-height	行高 文字行高=文字高度+上间距+下间距

单行文字垂直居中

方法：让文字行高等于盒子高度，对行文本不适用

a{
dispaly:block;
height:40px;
line-height:40px；
//text-align:center 加上这句就水平垂直居中
}

链接无下划线

//链接无下划线
a{text-decoration:none}

//ul 去掉小点
ul{list-style:none;}

五.背景

• 背景位置：background-position
• 半透明：background:gba(0,0,0.3)

六.css三大特性

1重叠性/覆盖

• 样式冲突：就近原则
• 样式不冲突，不会层叠

2继承性

• 子承父业
• 行高的继承

3优先级

七.盒子模型

边框

1. border

属性	具体
border-width	边框粗细
border-style	边框样式,默认none solid实线、dashed虚线、dotted点线
border-style	边框颜色
border:1px solid red	简写没有顺序

2. 表格细线边框

table,td,th {border:1px solid pink}
border-collapse:collapse;//合并相邻边框

3. 边框影响盒子的实际大小

• 解决方法
  • 方法一：测量盒子大小时不量边框
  • 方法二：测了边框需要width/height-边框宽度

内边距

1. 简写

padding:5px;
padding:5px 10px; //上下5px 左右10px
padding:5px 10px 20px; //上5px 左右10px 下20px
padding:5px 10px 20px 30px; //上 右 下 左 （顺时针）

2. 影响盒子大小
3. 如果盒子没有指定宽高就不影响宽度，孩子父亲一样宽

外边距

1. 作用：控制盒子与盒子之间的距离
2. 简写和padding一样
3. 应用：让盒子水平居中

前提
1 块元素
2 指定宽度（不然和父亲一样宽）
3 左右边距设为auto

//写法
margin:0 auto;
//(不能设置宽度)行内元素和行内块元素水平居中：给父元素添加text-align:center

4. 嵌套(父子关系)的块元素，父子同时有上外边距，父元素塌陷值较大

解决方法
1 为父元素定义上外距
2 为父元素定义上内边距
3 为父亲添加overflow:hidden
//还有其他方法，比如浮动，固定，绝对定位的盒子不会有塌陷问题

总结

• 布局不要只用div，标签都是有语义的，合理的地方用合理的标签，比如产品标题用h,大量文字段落用p，要靠平时积累
• 给盒子起类名，可以更好的找到这个盒子，选取盒子更容易，后期维护也更方便
• 用margin和padding能解决同个问题，就选简单的
• 布局思路：先模仿，再有自己风格

八.css3新增样式

圆角边框

1. border-radius:5px; //数字越大，弧度越弯
2. 圆形

width:200px;
height:200px;
border-radius:100px/50%;

3. 圆角矩形

width:300px;
height:100px;
border-radius:50px;

4. 该属性是简写属性

盒子阴影

文字阴影