文章目录
1.字体
- font-family:一组有共同特征的字体
- 指定候选字体
- text-decoration 可设置下划线等
2.盒模型
-
margin
-
line-height 可增加文本行之间的间距
-
background-image:设置背景图像
-
background-repeat:设置平铺方式
-
background-postion: 设置位置
- id
- 一个元素只能有一个id，但可属多个类
- class属性可以成组指定样式
3.块元素(block)&内联元素(inline)
块元素
- 常见块元素：div、p、address、blockquote、center、ul 、li、table、form、header、section、footer、h1 , h2 , h3 , h4 , h5 , h6
- text-align属性：用来将块元素中的所有元素对齐。可有所有嵌套的块元素继承
内联元素
+常见内联元素：a、font(em strong i)、img、span
+ <span>:与div类似，用于将相关内联元素和文本归组到一起
+ 元素可有不同的状态如<a> 可用伪类为各个状态指定样式
+ 伪类：link、visited、hover(悬停) 、active(活动的链接)
可变元素
- (根据上下文关系确定该元素是块元素还是内联元素)：如 button
二者不同之处
-
块级元素 特点：
- 总是在新行上开始，占据一整行；
- 高度，行高以及外边距和内边距都可控制；
- 宽带始终是与浏览器宽度一样，与内容无关；
- 它可以容纳内联元素和其他块元素。
- 块元素默认没高度，有内容才会有高度。
-
内联元素 特点：
- 和其他元素都在一行上；
- 默认没高度和宽度，有内容才会有。
- 其宽度随着内容增加 ,高度随字体大小而改变
- 内联元素虽然不能设置宽高，但是设置成绝对定位（absolute）后，可以设置宽高。(内联元素的margin-left / margin-right及padding-left / padding-rigtht是可以控制的，所以可以通过这4个属性来控制内联元素的宽度。)
- 行内元素只能容纳文本或者其他行内元素。
利用display属性
- display:block – 显示为块级元素
- display:inline – 显示为内联元素
- dipslay:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
4.布局与定位
3种布局
- 流体布局：内容自适应扩展的浏览器窗口
- 冻结布局：内容宽度固定
- 凝胶布局：宽度固定，外边距会随窗口扩展或收缩
4种定位(position属性)
- 静态定位(static) ：默认定位，元素正常流入
- 绝对定位(absolute)：允许指定绝对位置，默认相对页面页面边界放置
- 可以用z-index属性分层放置，使一个属性放置在另一个属性上面。z-index值越大，层次越高
- 相对定位(relative)：相对其外围包含元素来定位，元素仍在正常的页面流中，再按指定的量偏移元素
- 固定定位(fixed)：相对浏览器窗口定位，不会随页面滚动
- 补充：
- 绝对、固定、相对定位，可用属性top、right、bottom、left指定元素位置
- 浮动元素(float属性)放在块元素之上，不会影响页面流；内联内容会考虑浮动元素的边界，围绕这个浮动元素
- 浮动元素必须要有特定的宽度，不能设置为auto
5.伪元素::after
- 清除浮动
::after {
content: "";
display: block;
clear: both;
}
6.flex布局(弹性布局)
设置
- display: flex;
- 将对象作为弹性伸缩盒展示，用于块级元素
display: inline-flex; 将对象作为弹性伸缩盒展示，用于行内元素 - 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
- webkit内核需要加前缀：-webkit
属性
flex-direction
- 决定主轴的方向，即弹性项目排列方向
- row（默认值）：主轴为水平方向，起点左端
- row-reverse：水平方向反转
- column：主轴为垂直方向，起点上沿
- column-reverse：垂直方向反转
justify-content
- 主轴上的对齐方式
- flex-start：左对齐（默认）
- flex-end ：右对齐
- center ：居中
- space-between：两端对齐，两个弹性项目之间间隔相等
- space-around ：平均分布在该行上，两边留有一半的间隔空间
align-items
- 弹性项目在纵轴上如何对齐
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
- flex-start：交叉轴（侧轴）（弹性盒容器）的起始位置对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中点对齐
- baseline: 项目的第一行文字的基线对齐
flex-wrap
- 需要换行时设置
- nowrap：默认不换行
- wrap ：换行，第一行在上方
- wrap-reverse：换行，第一行在下方
align-content
- 设置多行对齐
- stretch：（默认）各行将会伸展以占用剩余的空间
- flex-start：与交叉轴（侧轴）（弹性盒容器）的起始位置对齐。
- flex-end：与交叉轴（侧轴）（弹性盒容器）的终点对齐。
- center：与交叉轴（侧轴）（弹性盒容器）的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around： 各行在弹性盒容器中平均分布，两边留有一半的间隔空间
flex-flow
- flex-direction属性和flex-wrap属性的简写，默认值为row nowrap
弹性子元素属性
order
- 定义弹性项目排列顺序
- 数值越小，排列越靠前
- 默认0
- 值为 integer
flex-grow
- 定义项目的放大比例
- 默认为0,不放大
flex-shrink
- 定义了项目的缩小比例
- 默认为1，会自动缩小
align-self
- 用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
- 值与align-items一样
7.关于CSS3的一些内容
属性
- opacity：透明度
- transform：
- cursor: pointer
- transition (转换效果)
- transition-property:要过渡的css属性名称（比如background-color、text-shadow或者all使用all则过渡会被应用到每个可能的css属性上）
- transition-duration:定义过渡效果持续的时间（单位为秒如，.3s、.2s或者1.5s）
- transition-timing-function:定义过渡期间速度如何变化（如ease、linear、ease-in、ease-out、ease-in-out或者cubic-bezier）
- transition-delay：可选，用于定义过渡开始前的延迟时间。相反，将该值设置为一个负数，可以让过渡效果立即开始，但过度路程则会从半路开始 + 缩写：transition: all 1.5s ease
- scale() ：缩放
扫一扫
1033
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
