文章目录
一.网页布局
三大核心
- 盒子模型
- 浮动
- 定位
本质
利用css摆盒子
三步
- 准备好标签,网页元素基本都是盒子
- 设置盒子(标签)样式和位置(核心)
- 盒子里装内容
盒子模型组成
- content:内容
- padding:内边距
- border:边框
- marigin:外边距,控制两个盒子距离,默认挨着
二.选择器
css语法:选择器 { n*键值对;}
基础选择器
- 标签选择器:"#"
- 类选择器:"."
//多类名使用方法:类名中间空格隔开
<div class="red font">小红</div>
- id选择器:一次只选择1个标签,一般和js搭配
- 通配符选择器:"*",特殊情况使用
//消除所有的元素标签的内外边距
*{
margin:0;
padding:0;
}
复合选择器
对基础选择器进行组合
- 后代选择器:儿子,孙子,曾孙子…
//标签之间用空格隔开
//ol下叫li的儿子,孙子,曾孙子
ol li { }
//以下两种写法一样
ol li a { }
ol a { }
- 子类选择器:亲儿子
.nav>a { }
- 并集选择器:集体声明
// 约定的语法规定,并集选择器喜欢竖着写
div,
p,
.pig li { }
- 伪类选择器:向某些选择器添加特殊效果 “:”
类型 | 解释 |
---|---|
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优先级
七.盒子模型
边框
- border
属性 | 具体 |
---|---|
border-width | 边框粗细 |
border-style | 边框样式,默认none solid实线、dashed虚线、dotted点线 |
border-style | 边框颜色 |
border:1px solid red |
简写没有顺序 |
- 表格细线边框
table,td,th {border:1px solid pink}
border-collapse:collapse;//合并相邻边框
- 边框影响盒子的实际大小
- 解决方法
- 方法一:测量盒子大小时不量边框
- 方法二:测了边框需要width/height-边框宽度
内边距
- 简写
padding:5px;
padding:5px 10px; //上下5px 左右10px
padding:5px 10px 20px; //上5px 左右10px 下20px
padding:5px 10px 20px 30px; //上 右 下 左 (顺时针)
- 影响盒子大小
- 如果盒子没有指定宽高就不影响宽度,孩子父亲一样宽
外边距
- 作用:控制盒子与盒子之间的距离
- 简写和padding一样
- 应用:让盒子水平居中
前提
1 块元素
2 指定宽度(不然和父亲一样宽)
3 左右边距设为auto
//写法
margin:0 auto;
//(不能设置宽度)行内元素和行内块元素水平居中:给父元素添加text-align:center
- 嵌套(父子关系)的块元素,父子同时有上外边距,父元素塌陷值较大
解决方法
1 为父元素定义上外距
2 为父元素定义上内边距
3 为父亲添加overflow:hidden
//还有其他方法,比如浮动,固定,绝对定位的盒子不会有塌陷问题
总结
- 布局不要只用div,标签都是有语义的,合理的地方用合理的标签,比如产品标题用h,大量文字段落用p,要靠平时积累
- 给盒子起类名,可以更好的找到这个盒子,选取盒子更容易,后期维护也更方便
- 用margin和padding能解决同个问题,就选简单的
- 布局思路:先模仿,再有自己风格
八.css3新增样式
圆角边框
- border-radius:5px; //数字越大,弧度越弯
- 圆形
width:200px;
height:200px;
border-radius:100px/50%;
- 圆角矩形
width:300px;
height:100px;
border-radius:50px;
- 该属性是简写属性