1. CSS的三种引入方式: 内联(inline style attribute)
<head> 标签内的 <style> 标签
<link> 标签中的外联
2. 三种主要的选择器 元素选择器
class 选择器
id 选择器
3. 样式优先级(从高到低) !important
内联样式
<style> 中的样式
link 中的样式
4. 选择器优先级(从高到低) !important
内联样式
id 选择器
class 选择器
元素选择器
5. display 属性
block
inline
inline-block
block 占一行 ,默认 block 的标签有:div p ul ol li h1 h2 h3 h4 h5 h6
inline 只占 content 的尺寸
inline-block 是 inline 布局 block 模式
inline-block 对外表现为 inline，所以可以和别的 inline 放在一行对内表现为 block，所以可以设置自身的宽高
6. 盒模型, inline 元素没有盒模型
内容
padding
border
margin
7.position 属性用于元素定位
static
relative
absolute
fixed
非 static 元素可以用 top left bottom right 属性来设置坐标
非 static 元素可以用 z-index 属性来设置显示层次
relative 是相对定位
absolute 完全绝对定位, 忽略其他所有东西
往上浮动到 非 static 的元素
fixed 基于 window 的绝对定位, 不随页面滚动改变
8.overflow属性
visible 默认
auto 需要的时候加滚动条
hidden 隐藏多余元素
scroll 就算用不着也会强制加滚动条
9.盒模型相关的 CSS
border
border-width
border-style
border-color
3 个属性可以简写为一句
border: 3px red solid
10. border-radius 是用来设置圆角度数的
它也拥有三种缩写, 对应的含义如下
左上角为 top, 右下角为 bottom
二. CSS简单布局基础
1.左右布局 ：
行内元素可以在同一行左右布局，行内元素是无法设置高度的，如果设置成inline-block可以设置高度
设置浮动可以实现左右布局，每个部分都设置浮动，父元素设置清除浮动，即可实现左右布局
2.左中右布局
左中右布局也可以通过浮动实现，同时左浮动，同时右浮动，或者计算宽度，部分左浮动，部分右浮动，设置浮动，父元素必须加清楚浮动
也可以设置成行内元素，或者行内块元素实现左中右布局
3.水平垂直居中
设置水平居中有text-align：center
先设置宽度，再设置居中
margin： xpx auto； 上下设置margin xpx，左右auto居中
padding: xpx auto,道理同上
垂直居中一般用内部元素根据文档流规则撑起来，然后通过设置margin或者padding撑大上下，实现水平居中。
1041
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
