CSS–Part One

1.选择器分类

选择器举例及性质样式类名选择器.xxxx 具有普遍性、通用性ID选择器#xxxx 具有唯一性，前提是标签得有指定ID标签选择器div a input…组合选择器.xxxx #xxxx /.xxxx input伪类选择器略复合选择器略

注：选择器可以根据层级关系进行设定，也可以只作用于某一层级

2.响应式设计

响应式设计性质核心@media前提适配移动端，增加一个标签+属性即可实现举例@media mediatype and not only(media feature){ css-code}

mediatype：

分类适用对象screen用于电脑、手机、平板的屏幕print打印机和打印预览speech屏幕阅读器all用于所有的设备

media feature：

举例height/widthmax-height/max-widthmin-height/min-widthdevice-height/device-widthcolor/max-color/min-colormax-device-height/max-device-widthmin-device-height/min-device-width

3.常见布局

常见布局细化H分栏式 1:1 1:2:1工头 内容 版权I略i略T下拉无底口无序列布局，自适应 100%国登录界面 水平、垂直居中布局框左右布局

注：布局心法：做布局时只考虑布局，做内容时只考虑内容

4.弹性盒子模型

作用于父容器，一级子容器生效display: flex; 设置为盒子模型（默认为从左向右排列）改变方向的方法： flex-flow: column; 排列方向改为垂直排列，相应属性的作用方向也发生变化 justify-content: center; 水平居中 align-items: center; 垂直居中

5.属性分享

box-shadowa b c d e fa水平方向阴影 右+ 左-b垂直方向阴影 下+ 上-c模糊半径 >0d阴影的距离 >0e阴影的颜色 rgba、rgb、#f内阴影 inset /外阴影 ourset(默认)