CSSBasic Day02
2017-01-22 17:40:32 0 举报AI智能生成
在CSS基础课程的第二天，学员们将深入研究CSS的核心概念和属性。他们将学习如何使用选择器来定位和样式化HTML元素，包括类选择器、ID选择器和属性选择器等。此外，他们还将探索盒模型的概念，了解如何设置元素的边框、内边距和外边距。在布局方面，学员将学习如何使用浮动和定位来实现灵活的页面布局。他们还将了解CSS中的继承和优先级规则，以及如何解决样式冲突。通过实践项目，学员们将有机会应用所学知识，创建具有吸引力和响应式的网页设计。这一天的课程将为他们在前端开发中打下坚实的基础，为他们未来的学习和职业发展奠定重要的基础。
作者其他创作
大纲/内容
背景
背景是从边框位置开始绘制
背景颜色
background-color
背景图像
background-image
url()
背景重复
background-repeat
repeat 默认值
no-repeat 不重复
repeat-x 横向重复
repeat-y 纵向重复
背景图片尺寸
background-size
value1 value2
value1% value2%
cover
覆盖，背景图显示不完整
contain
包含，背景图显示完整，覆盖不一定全面
背景图像固定
background-attachment
scroll:默认值
fixed : 固定
背景图像定位
background-position
x y
x : 水平偏移距离
+ ： 右偏移
- ： 左偏移
y:垂直偏移距离
+ ：下偏移
- ： 上偏移
x% y%
left、center、right、top、bottom
综合属性
background：color url() repeat attachment position;
框模型
什么是框模型
页面元素皆为框
Box Model，定义了元素框处理元素内容、内边距、外边距、边框的方式
width 和 height 只负责定义内容区域的尺寸
增加了 外边距、内边距、边框，内容区域的尺寸不会发生改变，但会影响元素框的总尺寸
元素总宽度=左右外边距+左右边框+左右内边距+width
元素总高度=上下外边距+上下边框+上下内边距+height
外边距
什么是外边距
围绕在元素边框（边缘）周围的空白区域
默认不能被其他元素所占据
外边距是透明的
作用
控制两个元素之间的距离
改变元素位置
属性
margin
单位
px
%
auto
设置块级元素的水平居中对齐
auto对上下外边距不起作用
元素要设置宽度
负值
将元素向着反方向移动
数量
value
四个方向外边距
v1 v2
上下 左右
v1 v2 v3
上 左右 下
v1 v2 v3 v4
上 右 下 左
单边设置
margin-left
margin-right
margin-top
margin-bottom
具备默认外边距的元素
body
h1~h6
p
ul,ol
dl,dd
pre
可以通过 CSS 重写（CSS Reset）的方式重写外边距
外边距的特殊情况
外边距合并
两个垂直外边距相遇时，他们将合并为一个，值以大者为主
外边距溢出
特殊情况下，给子元素设置外边距的时候，效果会作用在父元素上
父元素无边框
设置给第一个(最后一个)子元素时
解决方案
给父元素加边框
通过父元素的上（下）内边距取代子元素的外边距
在父元素中第一个（最后一个）子元素位置处，增加一个空<table></table>
... ...
行内元素以及行内块元素
行内
只左右有效，上下无效
行内块
左右正常，上下连同该行元素都会跟着改变
内边距
什么是内边距
内容与边框之间的距离
会扩大元素边框所占用的区域
属性
padding
单位
px
%
数量
同上
padding-方向:值
特殊效果
行内元素和行内块元素只影响到元素本身，并不会影响到其他元素
box-sizing
作用
改变元素框模型计算模式
取值
content-box
默认值
width和height只设置内容区域的尺寸，边框和内边距会额外加在元素上
border-box
边框和内边距会包含在width和height中
*{
box-sizing:border-box;
}
渐变
多种颜色 平缓过渡
分类
线性渐变 : linear-gradient
径向渐变:radial-gradient
重复线性渐变:repeating-linear-gradient
重复径向渐变:repeating-radial-gradient
属性:background-image
线性渐变
background-image:linear-gradient(angle,color-point,color-point,...,color-point)
angle:方向或角度
to top ：从下向上 --> 0deg
to right : 向右 --> 90deg
to bottom : 向下 --> 180deg
to left : 向左 --> 270deg
color-point
red 0px
blue 50%
yellow
径向渐变
background-image:radial-gradient([size at position],color-point)
size at position
50px at center center
30px at 50px 150px
10px at 10% 30%
重复渐变
重复线性渐变
repeating-linear-gradient()
重复径向渐变
repeating-radial-gradient()
浏览器兼容性：浏览器前缀解决
Firefox ：-moz-
Chrome & Safari ： -webkit-
Opera ：-o-
IE ： -ms-
background-image:-webkit-linear-gradient();
注意
如果浏览器不支持属性的话，前缀就加在属性名称前
-webkit-animation:值;
-o-animation:值;
-moz-animation:值;
如果浏览器支持属性，但不支持值，前缀就加在值的前面
background-image:-webkit-linear-gradient();
display:-webkit-flex;
0 条评论
下一页
