html css学习笔记

块元素和行内元素

block 块元素占一整行（宽度默认容器100%） 另一个元素另起一行显示 可以控制宽高

inline 行内元素 会在同一行显示 中间会留有空白间隙 不可控制宽高 padding border 只能设置水平方向

inline-block 行内块元素 结合了块元素和行内元素的特性

图片自适应

设置图片宽度后 高度设置为auto

外边距穿透解决方法

父元素里的子元素添加margin-top时 父元素跟着移动 这就是外边距穿透

解决方法 给父元素添加boder 或 padding

怪异盒模型

box-sizing: border-box; 文档默认 box-sizing: content-box;

当padding和border值小于盒子宽度 总宽度为 盒子设置的宽度

大于时 总宽度就是padding 和border的值

背景

background:color url() repeat center/100% 大小; 颜色 路径 平铺 位置 大小

repeat: repeat no-repeat repeat-x repeat-y

position: xxpx xxpx % % center top botom left right

size: px % cover覆盖 contain 完全适应区域（铺满）

background-attachment: fixed 默认 scroll 滚动

background-clip: content-box border-box padding 图片内容裁剪到的位置

background-origin: content-box border-box padding 以xx的位置来定位图片

子代选择器

ul>li

父代的下一级别

后代选择器是父后的所有级

行高量法

基线到基线距离为行高

文本垂直居中 height=line-height

盒子： 上 左右 下 /上下 左右 /上 右 下 左

css优先级

标签内属性：后面的会覆盖前面的

样式优先级 继承 < 默认< 通配符选择器 < 某一类型标签 < 类选择器 < id 选择器 < 行内样式

！important 强调 最高优先级 加在属性后面

a{
    font-size: 12px ! important ;
}

复合选择器

标签选择器 0，0，0，1

类选择器 0，0，1，0

id选择器 0，1，0，0

行内样式 1，0，0，0

当分值一样 就近原则

vertical-align 垂直居中对齐

middle 垂直居中

baseline 基线对齐 bottom

top 顶部对齐

作用：去除图片空白间隙

opacity 透明度

div中的所有元素

基本用在渐入渐出效果

IE8 以及以下浏览器 使用opacity 需要写为

filter: Alpha(opacity=50);

伪类元素

按照 lvah 顺序

link 未访问

visited 已访问

active 点击

hover 选中后

伪类选择器

first-child

last-child

: nth-child(n) 父级标签的第n个子元素(不分类型)

p: nth-of-type(n) 父级标签的第n个p元素 （分类型）

frist-of-type

last-of-type

only-of-type

​ :not(标签名/类名)

伪元素

p::selection 用户选中后的字体样式

content:'' 是必写项

p::before

P::after

属性选择器

标签中的属性来作为样式的选择条件

span [icon='']

表格

table

tr {th td}

colspan 合并列 从左往右合并

rowspan 合并行 从上往下 只能往下合并

border-collapse : collapse 合并边框

表单

input type

建议看原笔记

outline 聚焦框

form 表单域

action 表单地址

method 用于设置表单数据的提交方式 取值get或post

name 用于指定表单的名称以区分同一个页面的表单

清除浮动（高度塌陷）

​​​​​​​.clearfix:after{
    content:'';
    height:0;
    diplay: block;
    clear:both;
    visiblity:hidden;
}

overflow(高度塌陷)

hidden 隐藏 （缺点 会将内容隐藏）不能用于下拉菜单

auto

scorl

定位

position默认 static

relative

fixed

absolute

结构父级

定位父级（absolute）非static

加浮动或定位 display都会变成block

inline-block 不能用margin居中

字体

字体粗细 400：normal

700：bold

边框

solid 实线

dashed 虚线

dotted 点线

double 双实线

HTML常见标签的默认display属性归类

块级元素

div li p

行内元素

span img input

其中img input 可以设置宽高

常见复写格式

font ：font-style（样式）font-weight （字体粗细）font-size （字体大小）/line-height（行高） font-famliy（字体类型）

font：normal 400 14px/14px ‘黑体’；

margin：上 左 下 右 / 上 左右 下 /上下 左右

pading：

border border-width border-style border-color

border：1px solid red；

background：background-color（背景颜色）url（图片地址） baxkground-repeat（图片平铺）background-attachment（背景滚动）background-position（背景位置）/background-size （背景尺寸）

background：#eee url（img/img.jpg）no-repeat scroll center/cover(100% 100%)

段落

text-align：justify 实现两端对齐文本

border-readius

border-readius: 左上 右上 右下 左下/左上右下 右上左下 /左上 右上左下 右下

box-shadow

盒子阴影 0 0 10px 12px #ccc inside/outside

border-shadow：x轴 y轴 虚化（数值越大越模糊） 影子大小默认为0（四个边都会加上）默认outside 边框外的阴影

可叠加 0 0 10px #ddd，4px 4px 10px #fgg，xxxx

text-shdow（文字阴影）x轴 y轴 虚化 影子大小 颜色

渐变

渐变是background-image的值

linear-gradient 线性渐变

linear-gradient （#fff 20%，#ggg 20%）默认是从上到下

linear-gradient （to right ，#fff 20%，#ggg 20%）从左到右

linear-gradient （to bottom right，#fff 20%，#ggg 20%）从左上到右下

linear-gradient （0deg ，#fff 20%，#ggg 20%）任意角度

redial-gradient 径向渐变 从中心向外扩散 从内到外

readial-gradient （circle，red ，blue）正圆

repeating-linear-gradient重复样式

形变transform

transform：translate（xpx，ypx）平移

transform：translateX（xpx）



transform：rotate（ 0deg）旋转 中心原点旋转

transform：rotateX（ 0deg）

transform：rotateY（ 0deg）

transform：rotateZ（ 0deg）



transform：scale （1）缩放

transform：scalex （1）

实现半像素



transform：skew（）倾斜

可连写 不能另外写一个属性 会覆盖

transform-origin：left 改变原点

transition：1s 过渡时间

二十三天00