html css第三天笔记

一、CSS权重

 

 

 

 

 

 

二、常用的CSS样式属性

font-style: 设置字体的类型

normal: 正体字（默认值）

italic： 斜体字

font-weight: 设置字体的粗细

normal: 400 默认值 | bold | bolder | lighter

100~900

font-size: 设置字体大小

像素

line-height: 设置字体的行高

 

font-family : 设置字体的家族

"Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,sans-serif";

 

子属性的设置，可以通过父属性一次性设置，font有顺序要求

font: italic 600 12px/18px 宋体;

 

text-decoration: 字体装饰样式（通常给超链接用）

• none 默认值 无装饰（通常将超链接下划线去掉）

• underline 下划线

• overline 上划线

• line-through 删除线

text-indent：设置段落缩进样式

2em : 向右缩进两个字符

text-align: 设置文本在水平方向上的对齐方式

left ： 默认值 左对齐

right : 右对齐

center： 居中对齐

 

background: 设置背景的样式

line-height: inherit; orphans: 4; margin: 0.8em 0px; white-space: pre-wrap; position: relative; color: rgb(51, 51, 51); font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, "Segoe UI Emoji", sans-serif; font-size: 16px;"> background-image: 设置背景图片

background-repeat: 设置背景图片的平铺方式

repeat：x、y方向都会平铺 默认值

no-repeat: 不平铺 最常用

repeat-x: x方向都会平铺

repeat-y: y方向都会平铺

 

三、盒子模型

盒子模型用于布局，通过下面4类样式来设计盒子模型

内容：

width： 设置盒子的宽度

height: 设置盒子的高度

边框：

border : 设置盒子的边框样式

border-width: 设置边框的粗细， 通常使用像素

border-color: 设置边框的颜色

上面两个子属性必须配合border-style属性使用

border-style: 设置边框的类型

none : 没有边框 默认值

solid: 实线

dashed：虚线

border：可以设置四个方向的样式

border-top

border-right

border-bottom

border-left

 

内边距： 设置边框和内容之间的距离

padding(内补丁)：

 

外边距： 设置盒子与盒子之间的距离

margin(外补丁)：

 

 

解决margin-top穿透问题：

方式一：使用给父盒子加 overflow：auto

方式二：给父盒子加border

四、浮动布局（重点）

浮动布局：将文档流中的自然排序的块元素，变为横向多列布局

float: left | right

浮动的盒子的特点

1. 浮动的盒子不再占据文档流整个一行

2 .浮动的盒子对后面让在文档中的盒子有影响：浮动的盒子脱离了文档流，原本的位置不再占据，后面的盒子会自动补位

 

如果在文档流中的盒子不希望受浮动盒子的影响（被遮住）,

可以设置CSS属性

clear: left | right |both

 

边框塌陷问题：子盒子影响自适应高度的父盒子

本身在文档流中的子盒子，如果有高度，它是占据这个高度

父盒子采用自适应子盒子高度，父盒子高度由最高子盒子高度决定

但是一旦子盒子浮动，脱离了文档流，原本的位置不再占据，自适应高度的

父盒子高度变为0， 父盒子后面的盒子会占据原本父盒子的位置。

 

解决父盒子边框塌陷问题：

方式一：给父盒子固定高度，不推荐使用，不灵活

方式二： 在父盒子内的后面加一个内容为空的div，让这个div清除浮动

也不推荐，添加了一个没有太多作用的div

方式三： 给父盒子添加属性 overflow: hidden; 也不推荐使用，

因为overflow: hidden；还有一个主要作用，超出父盒子的内容会被隐藏。

方式四： 使用伪类（CSS2） | 伪元素(CSS3) ，主流开发的方式

本质上就是第二种，但是因为使用的是伪类，并没有产生无效的div

.clearfix:after{
    visibility:hidden;
    clear:both;
    display:block;
    content:".";
    height:0
}

 

 

CSS样式：

display: 设置元素的显示模式

块级元素： display属性默认是 block p div

display: block; 以块级元素显示

行内元素： display属性默认是 inline span

display: inline; 以行内元素显示

 

伪类：

列：

如下代码就是在body的末尾加上一个块元素

div:after {

dispaly:block;

with:100px;

height:100px;

backgroud-color:red;

content: "你好"

}