CSSBasic Day03
2017-01-22 17:41:04 0 举报AI智能生成
在CSS基础课程的第三天，我们将深入研究CSS的核心概念。我们会学习如何使用选择器来精确地定位HTML元素并应用样式。此外，我们还会探讨盒模型的概念，包括内容区域、内边距、边框和外边距，以及如何利用这些属性来创建吸引人的设计。我们还将研究颜色和字体属性，了解如何为网页添加色彩和个性化的字体。最后，我们将介绍一些基本的布局技巧，如浮动和定位，以帮助你创建灵活且响应式的网页设计。无论你是初学者还是有一定经验的开发者，这个课程都将为你提供一些有用的工具和技巧，帮助你更好地理解和使用CSS。
作者其他创作
大纲/内容
表格
常用属性
padding
width，height
文本格式化
字体
文本
background
border
vertical-align
top
middle
bottom
特有属性
边框合并
border-collapse
默认值：separate
collapse
边框边距
border-spacing
前提：必须为分离边框模式
即 border-collapse：separate
1个值
水平和垂直间距相同
2个值
第一个值：水平间距
第二个值：垂直间距
标题位置
caption-side
top
bottom
显示规则
table-layout
auto
自动表格布局
单元格大小会适应内容大小
复杂表格时加载速度较慢
适用于不确定每列大小时使用
传统表格体现方式
fixed
固定表格布局
列宽度取决于table和td中设置的宽度，与内容无关
加速显示表格
算法较快，但是不灵活
文本格式化
字体属性
字体系列
font-family
字体1,字体2
字体大小
font-size
px 或 pt 或 em
字体加粗
font-weight
normal
bold
value
400-900
字体样式
font-style
normal
italic
小型大写字母
font-variant
normal
small-caps
字体属性
font
style variant weight size family;
文本属性
文本颜色
color
文本排列
text-align
left
center
right
justify
两端对齐
文字修饰
text-decoration
none
underline
line-through
overline
行高
line-height
一行数据所占的高度，如果行高大于文字本身高度，那么该行文本将在行高的范围内垂直居中
font:12px/24px "微软雅黑";
font: 字体大小/行高 family;
font:size/line-height family;
首行文本缩进
text-indent
px
文本阴影
text-shadow
h-shadow v-shadow blur color
浮动(定位)
定位
什么是定位
元素该出现的位置
分类
普通流定位（文档流定位）
浮动定位
相对定位
绝对定位
固定定位
普通流（文档流）定位
每个元素都有自己的空间
块级：从上到下排列，每个元素独占一行
行内&行内块：从左到右的显示，显示不下再换行
浮动定位
浮动定位&特点
脱离文档流：不占据页面空间
后续元素上前补位
停靠在父元素的左边或右边或其他已浮动元素的边缘
浮动定位属性
float
none
left
左浮动
right
右浮动
特殊注意
浮动元素都会变成块级
块级元素不限制宽度时，浮动后将变成自适应宽度
父元素的宽度不足以包含所有的子元素时，那么最后一个将换行
清除浮动
clear
none
left
清除当前元素的左边浮动元素带来的影响
right
清除当前元素的右边浮动元素带来的影响
both
清除左右两边浮动元素带来的影响
浮动元素对父元素的影响
父元素的高度最终以 没有 浮动元素的高度为准
解决方案
设置高度
父元素也浮动
设置父元素的 overflow 属性 值为 hidden或auto
在父元素中追加 空的块级 子元素并设置其 clear值为 both
0 条评论
下一页
