day01

A 今天学到了什么

1. html和css是什么

html是网页的结构，css是修饰

2.了解html标签

html标签的结构：
开始标签
结束标签

3.常用的html标签

div :盒子标签

p :段落标签

h1--h6: 标题标签

ul ：无序列表标签,
li ：定义标签

dl 定义标签,
dt 描述标签,
dd :定义内容

img 图片标签

button 按钮标签

input 输入框标签

4.常用的css样式

width : 宽度

height:高度

background-color：背景颜色

color：字体颜色

text-aline:文本对齐方式

line-height:行高

background-image:背景图片

border：边框

border-style:边框样式

border-color:边框颜色

margin：外边界

padding:内边界

文本居中：
margin-left:auto
margin-right:auto

行居中：
line-height = height

5.css 选择器

元素选择器： p{}

class选择器
.tes{}

id选择器
#one{}

p:hover{}

6.选择器的优先级

!important > id > class > 元素选择器 
hover不参与

7. 盒子模型

a9d3fd1f4134970a37cf81a69fcad1c8a6865dfe.jpg

盒子模型宽高计算方法：
总宽 = width+（左+右）padding+（左+右）margin+（左+右）border(px)
总高 = height+（上+下）padding+2（上+下）margin+（上+下）border(px)

margin 和padding 按照从上开始顺时针排布顺序
exe：margin: 10 px 20px 30 px 40px ;
上 右 下 左

B 今天学到了什么

1.html 和CSS是什么

html是网页的结构，css是修饰

2.html的结构体

开始标签
结束标签

3.常用的html标签

div 盒子标签

p 段落标签

h1 -- h6 标题标签

ul无序列表标签
li  定义列表

dl 定义标签
dt 定义术语
dd 定义内容

img 图片标签

input 输入标签

button 按钮标签

4. 常用的CSS样式

color 字体颜色

background-color 背景颜色

background-image 背景图片

width 宽度

height 高度

text-aline 对齐方式

line-height 行高

元素对齐方式
margin-left:0;
margin-right:0;

border 边框

margin 外边界

padding 内边界

5.CSS选择器

元素选择器

class选择器

id选择器

hover伪选择器

6.选择器的优先级

!important > id >class>元素
hover不参与

7.盒子模型

a9d3fd1f4134970a37cf81a69fcad1c8a6865dfe.jpg

盒子模型宽度计算： width+padding+margin

margin从上开始顺时针排序
padding同理

C今天没有掌握什么

全都掌握了