css标签样式边框盒子模型定位溢出 z-index 透明度

一、CSS设置标签样式
二、盒子模型
三、浮动（************）
三、溢出
四、定位
五、z-index 控制z轴
六、位置的变化是否脱离文档流
- 1.不脱离文档流
- 2.脱离文档流
七、透明度

1|0一、CSS设置标签样式

1|11. 给标签设置长和宽

只有块级标签才可以设置长宽
行内标签设置了没有任何作用（行内仅仅只取决于内部的文本大小）

1|22.字体的颜色（3种表示方法）

颜色的英文
#6aode 直接使用pycharm提供的取色器即可
rgb(1，2，3) 可利用截图软件获取三基色数字
rgba(0,128,128,0.5) 最后一个数字，只能用来调节颜色的透明度，数值越小越透明

<style>
        p {
            font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
            font-size: 24px;
            font-weight:light, lighter;bold ,bolder 字重：控制字体粗细
            /*color: 'red';*/
            /*color: #06a0de;*/
            /*color: rgb(0,128,128);  !*  数字范围只能是0~255*!*/
            color: rgba(0,128,128,0.9);
        }
</style>

1|33.文本样式

<style>
        p {
            /*text-align: center;*/
            /*text-align: left;*/
            /*text-align: right;*/
            /*text-align: justify;*/

            text-decoration: underline;
            text-decoration: overline;
            /*text-decoration: line-through;*/ 
            /*text-decoration: none;*/
            font-size: 24px;
            text-indent: 48px;  /* 表示文本的开头缩进多少位。*/
        }
        a {
            text-decoration: none;
        }
</style>

1|44. 语义

取消a标签默认的下划线

a {
	text-decoration:none
}

1|55. 背景样式

背景图片默认是铺满整个区域

以前，通常一个页面如果出现很多同样的小图标，一个个的小图标并不是单独的
而是一张非常大的图片该图片上有网址所用到的所有的小图标
通过控制背景图片的位置来显示不同的图标样式

<style>
        div {
            width: 400px;
            height: 400px;
            /*background-color: orange;*/
            /*background-image: url("111.png");*/
            /*background-repeat: no-repeat;  !*不平铺*!*/
            /*background-repeat: repeat-x;  x轴平铺*/
            /*background-repeat: repeat-y;  y轴平铺*/
            /*background-position: center center;*/
            /*background-position: 10px 50px;  !*第一个参数是x轴 第二个参数y轴*!*/		
            background-attachment:fixed  让背景固定不动，这个功能很实用
            /*支持简写*/
            background: url("111.png") red no-repeat center center fixed;
        }
</style>

  
  

## 6. 边框

```css
border 后面写三个参数   位置没有关系 
			颜色
			粗细
			样式 solid dotted dashed none 四种样式
		可以单独设置 样式 颜色 粗细
			border-top-style:dotted;
			border-top-color: red;
			border-right-style:solid;
			border-bottom-style:dotted;
			border-left-style:none;
		
		可以单独设置某一边的样式 ，参数的顺序任意
			border-top: 3px solid red;
            border-left: 1px dotted green;
            border-right: 5px dashed blue;
            border-bottom: 10px solid pink;
		也可以简写统一设置 ，参数顺序任意
			border: solid 10px red;

1|06.1 边框变圆

使用border中的radius属性和给定的长宽即可做到让边框编程圆形、椭圆、棱角圆润等效果

<style>
        div {
            border: 1px solid black;
            background-color: red;
            height: 400px;
            /*width: 400px;*/
            width: 800px;
            border-radius: 20px; 棱角圆润
            border-radius: 50%; 椭圆
            
            只有长宽相等时，再利用radius，才能编程圆形边框
        }
</style>

1|67.display 标签转换

display
		inline 将块儿级标签变成行内标签
		block  能够将行内标签 也能设置长宽和独占一行
		inline-block;  /*即可以设置长宽 也可以在一行展示*/
		
		display:none  隐藏标签 并且标签原来占的位置也没有了，而且代码的功能也没有了********
		
		visibility:hidden  隐藏标签 但是标签原来的位置还在 ，代码的功能还在********

2|0二、盒子模型

谷歌浏览器body默认有8px外边距，在查看页面源码时，选中某些属性通过键盘上下方向键即可改变属性值。如长宽半径等属性。
当我们想要改变两个嵌套标签之间的距离时，可以改变一个标签的外边距，也可以改变另一个标签的内边距。

以快递盒为例
			1.两个快递盒之间的距离(标签与标签之间的距离) 				外边距(margin)
			2.快递盒盒子的厚度(边框border)      				边框(border)
			3.快递盒中的物品距离内边框的距离(内部文本与内边框之间的距离)        内边距(内填充) padding
			4.物品的大小(文本大小)							内容content
		
			/*margin: 15px;  !*只写一个参数 上下左右全是*!*/
            /*margin: 10px 20px;  !*第一个控制的上下  第二个是左右*!*/
            /*margin: 10px 20px 30px;  !*第一个控制的上  第二个是左右 第三个是下*!*/
            margin: 10px 20px 30px 40px;  /*上  右   下  左 ， 即顺时针排列*/
			
			padding简写规律跟margin一样
			
	
		        #d1 {
            margin: 0 auto;/* 就和只有俩参数的情况是一样的，上下为0，左右自动，就是各一半*/
        			}
			只能左右居中  不能上下居中

3|0三、浮动（************）

关键字：float
浮动是让有浮动属性的标签悬浮在没有浮动的标签之上，脱离了文档流

在 CSS 中，任何元素都可以浮动。
		
		浮动的元素 是脱离正常文档流的(原来的位置会让出来)
		
		浏览器会优先展示文本内容(******)
		
	浮动带来的影响
		会造成父标签塌陷(口袋瘪了)
		
		如何解决父标签塌陷问题？？？
	
		clear  清除浮动带来的影响，具体方法如下
		
		.clearfix:after {
            content: '';
            clear: both;  /*左右两边都不能有浮动的元素*/
            display: block;
        }
		哪个父标签塌陷了 就给谁加clearfix这个类属性值

4|0三、溢出

当设定的标签的长宽后，标签的大小小于其文本或图片等数据的大小时，多余的数据就会展示在标签的边框之外。这就是溢出

<style>
        div {
            height: 50px;
            width: 50px;
            border: 3px solid black;
            /*overflow: hidden;  !*溢出的直接隐藏*!*/
            /*overflow: auto;  如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容*/
             /*overflow: scroll; 内容会被修剪，但是浏览器会显示滚动条以便查看其多余的长宽的内容*/
        }
</style>

5|0四、定位

所有的标签默认都是静态的， 静态的是无法改变位置的
		position: static;


		必须将静态的状态修改成定位的三种参数之一后，才能改变位置
		
		相对定位(了解)   relative
			相对于标签原来的位置 移动
			
			
		绝对定位(小米的购物车)  absolute
			相对于已经定位过(只要不是static都是定位过了的)的父标签 再做定位(******)		
	
		
		固定定位(回到顶部)  fixed
			相对于浏览器窗口  固定在某个位置不动


代码演示：
<style>
        body {
            margin: 0;
        }
        /*.c1 {*/
            /*width: 100px;*/
            /*height: 100px;*/
            /*background-color: gold;*/
            /*position: relative;*/
            /*left: 100px;*/
            /*top: 100px;*/
        /*}*/
        /*.c2 {*/
            /*position: relative;  !*将c2从一个不是定位标签变成已经定位过的标签*!*/
            /*height: 100px;*/
            /*width: 200px;*/
            /*background-color: black;*/
        /*}*/
        /*.c3 {*/
            /*position: absolute;*/
            /*height: 200px;*/
            /*width: 800px;*/
            /*top: -50px;*/   **********************
            /*left: 200px;*/  **********************
            /*background-color: pink;*/
        /*}*/
        .c2 {
            border: 5px solid black;
            background-color: pink;
            position: fixed;
            bottom: 50px;
            right: 50px;
        }
</style>
</head>
<body>
<!--<div class="c1"></div>-->
<!--<div class="c2">-->
    <!--<div class="c3"></div>-->
<!--</div>-->
<div style="height: 10000px;background-color: darkgray" class="c1"></div>
<div style="height: 10000px;background-color: green" class="c1"></div>
<div style="height: 10000px;background-color: red" class="c1"></div>
<div class="c2">回到顶部</div>


</body>

6|0五、z-index 控制z轴

 <style>
        .cover {
            background-color: rgba(128,128,128,0.4);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 999;
        }
        .modal {
            background-color: white;
            z-index: 1000;
            position: fixed;
            height: 200px;
            width: 400px;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -200px;
        }
    </style>

7|0六、位置的变化是否脱离文档流

7|11.不脱离文档流

相对定位
static标签静态

7|22.脱离文档流

浮动的元素
绝对定位
固定定位

8|0七、透明度

直接使标签的全部内容包括背景的透明度都会同时变化
属性名：opacity

<style>
        .c1 {
            background-color: rgba(128,128,128,0.4);
            opacity: 0.2;
        }
        .c2 {
            opacity: 0.2;
            background-color: red;
        }
</style>

__EOF__

本文作者：BigSun丶
本文链接：https://www.cnblogs.com/Mcoming/p/11861696.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！

posted @ 2019-11-14 20:10 BigSun丶阅读(399) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！

公告

css标签样式边框盒子模型定位溢出 z-index 透明度

发表于 2019-11-14 20:10阅读次数：399评论次数：0

前端从入门到精通

关注

跳至底部

昵称： BigSun丶
园龄： 5年6个月
粉丝： 13
关注： 10

+加关注

质疑IT，理解IT，成为IT

css标签样式边框盒子模型定位溢出 z-index 透明度

1|0一、CSS设置标签样式

1|11. 给标签设置长和宽

1|22.字体的颜色（3种表示方法）

1|33.文本样式

1|44. 语义

1|55. 背景样式

1|06.1 边框变圆

1|67.display 标签转换

2|0二、盒子模型

3|0三、浮动（************）

4|0三、溢出

5|0四、定位

6|0五、z-index 控制z轴

7|0六、位置的变化是否脱离文档流

7|11.不脱离文档流

7|22.脱离文档流

8|0七、透明度

公告

BigSun丶

css标签样式边框盒子模型定位溢出 z-index 透明度

搜索

常用链接

随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

质疑IT，理解IT，成为IT

css标签样式 边框 盒子模型 定位 溢出 z-index 透明度

1|0一、CSS设置标签样式

1|11. 给标签设置长和宽

1|22.字体的颜色（3种表示方法）

1|33.文本样式

1|44. 语义

1|55. 背景样式

1|06.1 边框变圆

1|67.display 标签转换

2|0二、盒子模型

3|0三、浮动（************）

4|0三、溢出

5|0四、定位

6|0五、z-index 控制z轴

7|0六、位置的变化是否脱离文档流

7|11.不脱离文档流

7|22.脱离文档流

8|0七、透明度

公告

BigSun丶

css标签样式 边框 盒子模型 定位 溢出 z-index 透明度

搜索

常用链接

随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

css标签样式边框盒子模型定位溢出 z-index 透明度

css标签样式边框盒子模型定位溢出 z-index 透明度