标签：46 前端 元素 边框 学习 background margin CSS 属性

目录

• 一、CSS样式
  • 1. CSS尺寸属性
  • 2. CSS颜色
  • 4. CSS文本属性
    • 4.1 对齐方式
    • 4.2 文本划线
    • 4.3 首行缩进
  • 5. CSS背景属性
    • 5.1 背景颜色
    • 5.2 背景图片
    • 5.3 背景重复
    • 5.4 背景重复
    • 5.5 背景图片防止滚动
• 二、CSS框模型(盒子模型)
  • 1. 边框属性
  • 2. 边框倒圆角
  • 3. 盒子模型
• 三、CSS的display属性
  • 1. display:"none"与visibility:hidden的区别：
• 四、CSS浮动
  • 1. float的取值
  • 2. 解决浮动带来的父标签塌陷
  • 3. overflow属性溢出
• 五、CSS定位
• 六、z-index控制z轴
• 七、透明度

一、CSS样式

1. CSS尺寸属性

只有块级标签才可以设置长长宽。

行内标签的样式仅仅取决于内部文本值，所以不能设置长宽。

1. height：设置元素的高度
2. width：设置元素的宽度。

2. CSS颜色

设置方式：{color:颜色数据}

颜色数据设定方式：

1. 颜色英文 red
2. #06a0de 直接用pycharm提供的取色器取色即可
3. rgb(1,1,1) 可以利用截图软件获取三基色数字
4. rgba(0,128,128,0.9) 最后一个数字用来调节颜色的透明度

## 3. CSS字体属性

1. 使用font-family属性定义文本的字体系列。

body {font-family: "Microsoft Yahei", "微软雅黑","Arial", sans-serif}

1. 使用font-size属性定义文本的字体大小。

p {font-size: 14px;}

1. 使用font-weight属性定义文本的字体粗细。

默认为normal，bold为粗体，lighter为细体。

p{font-weight: lighter;}

4. CSS文本属性

4.1 对齐方式

text-align用来定义文本的水平对齐方式。

text-align:left  左边对齐 默认值

text-align:right  右对齐

text-align:center  居中对齐

text-align:justify  两端对齐,最后一行不参与对齐

4.2 文本划线

text-decoration 用来给文字添加特殊效果。

text-decoration:none   啥也没有，默认格式
text-decoration:underline   定义文本下有一条线。
text-decoration:overline   定义文本上有一条线。
text-decoration:line-through   定义穿过文本中间的一条线

a标签默认自带一条下划线，常用text-decoration: none将a标签的下划线删除

4.3 首行缩进

text-indent 用来将文本首行缩进，后面接像素值。

将段落的第一行缩进 32像素：
text-indent: 32px;

5. CSS背景属性

背景属性支持简写

background:#336699 url('1.png') no-repeat left top;

5.1 背景颜色

background-color:颜色值

background-color: red;  设置背景色为红色

5.2 背景图片

background-image: url(‘图片地址’);

5.3 背景重复

background-repeat 用来设置背景图片是否可以重复平铺

background-repeat:repeat   背景图片平铺排满整个网页(默认)
background-repeat: repeat-x   背景图片只在水平方向上平铺
background-repeat: repeat-y   背景图片只在垂直方向上平铺
background-repeat: no-repeat   背景图片不平铺

5.4 背景重复

background-position 用来设置图片位置

background-position: center center;   图片从中间开始显示，向外扩展（center，left，top）
background-position: 10px 50px;   左、上离边框的距离

5.5 背景图片防止滚动

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

可以通过background-attachment属性来防止图片滚动，它的默认值为scroll，即默认滚动。

background-attachment:fixed  即可防止图片滚动了

二、CSS框模型(盒子模型)

CSS框模型定义了元素边框的范围：margin(外边框),border(边框),padding(内边框)这三种边框以及Content(元素本身)。

1. 边框属性

每一种边框都含有三种属性：width(宽度)、style(样式)、color(颜色)。

style有none(无边框),dotted(点状虚线边框),dashed(矩形虚线边框),solid(实线边框)四种。

边框可以统一设置，也可以分开来设置，单独设置某一边的边框。

border: solid 10px red; 
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;

2. 边框倒圆角

用border-radius可以将边框倒圆角，属性值为倒圆角的半径。

div {
    border: 1px solid black;
    background-color: red;
    height: 200px;
    width: 200px;
    border-radius: 50%;  设置半径为方形边框的一半，可以得到一个圆
}

3. 盒子模型

• margin:用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
• padding:用于控制内容与边框之间的距离；
  
• Border(边框):围绕在内边距和内容外的边框。
• Content(内容):盒子的内容，显示文本和图像。

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}
等价于：
.margin-test {margin: 5px 10px 15px 20px;} 上右下左
.mycenter {margin: 0 auto;} 一般margin居中
margin: 15px;  /*只写一个参数 上下左右全是*/
margin: 10px 20px;  /*第一个控制的上下  第二个是左右*/
margin: 10px 20px 30px;  /*第一个控制的上  第二个是左右 第三个是下*/


.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}
.padding-test {padding: 5px 10px 15px 20px;}上右下左

三、CSS的display属性

display属性用来控制HTML元素的显示效果。

值	意义
display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"	使元素同时具有行内元素和块级元素的特点。

1. display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

四、CSS浮动

在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

关于浮动的两个特点：

1. 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
2. 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

1. float的取值

有三种：

1. left：向左浮动
2. right：向右浮动
3. none：默认值，不浮动

2. 解决浮动带来的父标签塌陷

浮动的元素，是脱离正常文档流的(原来的位置会让出来)。可以使用clear来清除浮动带来的影响。

.clearfix:after {
    content: '';
    clear: both;  /*左右两边都不能有浮动的元素*/
    display: block;
}

哪个父标签塌陷了,就给谁加clearfix这个类属性值.

3. overflow属性溢出

有时候元素框的范围很小，元素的内容又很多，这时候元素的数据就会溢出元素框。这个时候可以使用overflow来解决这个问题。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

• overflow（水平和垂直均设置）
• overflow-x（设置水平方向）
• overflow-y（设置垂直方向）

五、CSS定位

所有的标签默认都是静态的，无法改变位置。此时可以用position属性来改变标签的位置。

1. 默认定位 position: static;

   必须将静态的状态修改成定位之后

2. 相对定位(了解) position: relative

   相对于标签原来的位置 移动

3. 绝对定位(小米的购物车) position: absolute

   相对于已经定位过(只要不是static都可以 relative)的父标签 再做定位(******)

4. 固定定位(回到顶部) position: fixed

   相对于浏览器窗口 固定在某个位置不动

六、z-index控制z轴

z-index: 数字; 用来控制层面的高度，越高越显示在前面

七、透明度

opacity: 数字（0~1）

标签：46,前端,元素,边框,学习,background,margin,CSS,属性
来源： https://www.cnblogs.com/bowendown/p/11862885.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。