布局相关
1 设置宽高
width 和 height 赋值像素或者百分比
宽度可以通过百分比设置,高度不生效。
2 设置位置 :
外边距:
margin 指当前元素距父元素或者相邻元素的距离
格式: margin-top (left right bottom)
margin:10px 四个外边距都是10px
margin:10px 20px 上下10px 左右20px
margin : 0 auto 居中
margin: 10px 20px 30px 40px 上 右下左
内边距:
元素内容距元素边框的距离,***改变内边距的值,元素的宽高会随着改变***
浏览器默认会给一些元素添加内边距或者外边距,所以工作的时候会使用以下代码
把默认内外边距清零,从而达到不同浏览器效果统一的目的
格式:
*{
padding:0;
margin:0;
}
3 边框(border):
border:2px solid red; -- 设置元素的边框(可以同时设置边框的宽度、样式、颜色)
border属性可以拆分为如下设置:
border- 2px; -- 设置元素边框的宽度
border-style: solid; -- 设置元素边框的样式
border-color: red; -- 设置元素边框的颜色
其中border-width、border-style、border-color也可以按照上右下左方向进行拆分,以border-width为例:
border-top- 2px; -- 设置上边框的宽度
border-left- 2px; -- 设置左边框的宽度
border-right- 2px; -- 设置右边框的宽度
border-bottom- 2px; -- 设置下边框的宽度
4 盒子模型
CSS渲染页面的时候,使用了一种规则,就是盒子模型
盒子模型包括了12个数值,分别是:外边距的上下左右
,内边距的上下左右,边框的上下左右。
··· 一个元素在页面中所占宽度的公式:
(左外边距+左边框的宽度+左内边距)+内容宽度+右内边距+右边框的宽度+右外边距
盒子模型显示元素的注意事项
块级元素:
1 默认占一行,宽度默认100%,高度默认内容高度。
2 上下相邻的两个块级元素,上下外边距会有坍塌效果。
会取两个外边距的最大值
行内元素:
1 默认多个行内元素占一行。
2 不可以设置宽高,宽高为内容的宽高。
3 给行内元素设置左右外边距/边框/内边距都会生效,上下的不生效或显示异常。
5 颜色赋值
赋值方式
/*通过颜色名称赋值*/
/*background-color: red;*/
/*通过6位数的十六进制赋值
每两个值表示一个颜色 红绿蓝*/
/*background-color: #ff00ff;*/
/*3位的十六进制写法*/
/*background-color:fff; */
/*通过rgb 10进制赋值*/
/*background-color: rgb(255,0,0);*/
/*通过rgb 10进制赋值 带透明值 a = alpha(0-1)*/
background-color: rgba(0,0,255,1);
6 背景属性
background-color
:设置背景颜色
background-image
:设置背景图片,url('图片的路径');
background-repeat
:设置或检索对象的背景图像是否及如何铺排,常用取值:
repeat(默认值,重复排列)
repeat-x(横向重复排列,但纵向不重复)
repaet-y(纵向重复排列,但横向不重复)
no-repeat(不重复)
background-position
:设置或检索对象的背景图像位置
background
: 背景颜色 背景图片 背景图片是否重复 背景图片的位置7 文本属性
1、text-align
:设置元素中文本水平对齐方式,其常用取值为:
left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐
2、text-decoration
:设置文本的下划线样式,其常用取值为:
underline: 有下划线
none: 没有下划线
3、text-indent
:设置文本首行缩进,单位: 像素/百分比
4、letter-spacing
:设置字符间隔/间距,其常用取值为:
normal
像素值
5、text-shadow
:设置字体阴影,其取值为:
像素值 像素值 像素值 颜色值
第一个值为阴影水平位移,第二个值为阴影垂直位移,第三个值为阴影扩散值,第四个值为阴影颜色
圆角属性: boeder-radius:2px;
光标样式:cursor:pointer;
8 溢出属性 overflow
visible:溢出部分可见
hidden:溢出部分隐藏
scroll:溢出部分滚动显示
9 display属性:
该属性控制元素的显示方式
block:块级元素的默认值
默认情况下独占一行
可以设置宽高
inline:行内元素的默认值
默认情况下多个行内元素可以处在同一行
一般不能设置宽高
inline-block:行内块元素
多个元素既可以显示在同一行, 也可以设置宽和高
none:表示隐藏元素
10 元素类型(了解)
div/span/p 都是一个容器标签,用于包裹其他内容(这些元素本身不具备太多的样式!)
p: 块级元素,默认独占一行,用于包裹一段文本(写文章时用于p标签包裹每一段内容)
div: 块级元素,默认独占一行,用于包裹其他内容,将样式设置在div上,就可以作用在div的内容上。
span:行内元素,默认可以和其他元素显示在同一行。
(1)块级元素(block)
默认情况下,块级元素独占一行
可以设置宽和高,如果设置了就是设置的宽和高
如果不设置宽和高,其中宽是默认填满父元素,而高是由内容决定(由内容支撑)
比如: div/p/h1~h6/form/table 等元素都是块级元素
(2)行内元素(inline)
默认情况下,多个行内元素可以处在同一行
不能设置宽和高
比如: span/input/img/i/b 等元素都是行内元素
(3)行内块元素(inline-block)
既具备行内元素的特征(可以同行显示),还具备块级元素的特征(可以设置宽和高)