CSS学习总结

平常世道 發表於 2021-7-13 09:20:00

<div class="cnblogs_code">
<pre>/* 总结CSS学习 */
/* 1.字体样式 */
a{
font-size: 20px; /* 字体大小单位px em */
font-family: "宋体";/* 微软雅黑宋体黑体*/
font-family: Arial,"微软雅黑","宋体","黑体";/* 同时指定多个字体.中间以逗号隔开，浏览器如果不支持。会一直往后面找。 */
font-family: "\5b8b\4153";/* \5b8b\4153：Unicode字体 */
font-weight: bold;/* 默认值（不加粗）bold: 定义粗体(加粗的)100-900 400等同于normal.而700等同于bold */
font-style: normal; /* normal:正常的字体 italic:整体倾斜(一般用于斜体标签(em,i)改为普通模式) */
color: red;/* 自定义文字颜色 red:单词：#000000十六进制 rgb(255,103,0); */
text-align: center;/* 文本水平对齐方式left:左对齐right:右对齐center:居中对齐 */
line-height: 24px;/* 行间距行距比字号大7-8个像素左右就可以了 */
text-indent: 2em;/* 首行缩进 1em 就是一个字的宽度.如果是汉字的段落.1em就是一个汉字的宽度 */
text-decoration: none;/* 文本装饰-文本线条 none:默认：定义标准的文本。取消下划线underline 定义文本下的一条线。下划线也是我们链接自带的（常用）overline:定义文本上的一条线。 line-through:定义穿过文本下的一条线 */
text-decoration: none;/* 取消a标签的下划线 */
text-decoration: underline;/* 文字底部加一条下划线 */
text-decoration: line-through;/* 原价文字中间加一条线 */
font:normal 700 20px "微软雅黑" /* 综合写法 font:font-style font-weight font-size/line-height font-family */
}
/* 2.选择器 */
/* 后代选择器选择后面的全部 */
div strong {
color: #FF0000;
}
/* 子元素选择器。只显示直属的 */
div>strong {
color: #FF0000;
}
/* 交集选择器。即是**关系,又是**关系; */
p.red{
color: red;
}
/*并集选择器逗号是和的意思*/
p,div,.red{
color: #FF0000;
}
/*******伪类选择器**********/
/* 未访问过的状态 */
a:link{
color: #FF0000;
text-decoration: none;
}
/* 已经访问过的状态 */
a:visited{
color: #FF0000;
text-decoration: none;
}
/* 鼠标经过连接时候的状态 */
a:hover{
color: aqua;
text-decoration: none;
}
/* 当我们点击的时候（按下鼠标。点击的时候） */
a:active{
color: gold;
}
/* 3.背景相关 */
.bg{
background-color: #FF0000;/* 背景颜色 */
background-image: url(image/redbgc.png);/* 背景图片地址不要加引号 */
background-repeat:no-repeat;/*背景样式: repeat：平铺 no-repeat:背景图片不平铺repeat-x;横向平铺repeat-y;竖向平铺 */

/* 背景位置：position 重点
center:水平垂直居中
right：垂直靠右
right top：右上角
left top:左上角
left 垂直靠左
top 水平靠上
bottom:水平靠下
bottom left:左下角
bottom right:右下角
background-position: x y; */
background-position: 50px 50px;
background-position: bottom left; /* 左下角 */
background-position: left; /* 左边 */
/*两种定位方式是可以混用的*/
background-position: 10px center;
/* 背景简写 */
/* background: 背景颜色背景图片地址背景平铺背景滚动背景位置; */

}

/* 4.盒子模型 */
div{
/* 上边框是点状
右边框是实线
下边框是双线
左边框是虚线 */
border-style:dotted solid double dashed; /* 边框样式 */

/*上边框是点状
右边框和左边框是实线
下边框是双线 */
border-style:dotted solid double;

/*上边框和下边框是点状
右边框和左边框是实线 */
 border-style:dotted solid;

 /*所有 4 个边框都是点状 */
 border-style:dotted;

 /*
 边框线条类型
 none 定义无边框。
 hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
 dotted 定义点状边框。在大多数浏览器中呈现为实线。
 dashed 定义虚线。在大多数浏览器中呈现为实线。
 solid 定义实线。
 double 定义双线。双线的宽度等于 border-width 的值。
 groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
 ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
 inset 定义 3D inset 边框。其效果取决于 border-color 的值。
 outset 定义 3D outset 边框。其效果取决于 border-color 的值。
 inherit 规定应该从父元素继承边框样式。 */

/* 边框综合性写法
粗细边框样式边框颜色 */
border: 5px dotted #FF0000;
/* 只定义上边框 */
border-top: 2px solid red;
/* 只定义左边框 */
border-left: 2px solid red;
/* 只定义右边框 */
border-right: 2px solid red;
/* 只定义下边框 */
border-bottom: 2px solid red;

/* 内边距 */
padding-left: 10px;
padding-top: 30px;
/* 简写 */
padding: 20px;/* 上下左右内边距 */
padding: 10px 20px;/* 两个值：上下10px 左右20px */
padding: 10px 20px 30px;/* 三个值：上10px 左右20px 下是30px */
padding: 10px 20px 30px 40px;/* 上右下左 */
padding: 1px;
/*注：盒子的实际大小=内容的宽度和高度+内边距+边框 */
/* 注意：边框和内边距需要考虑两边的大小。例：一个盒子高度是10px.
上边框2px 和下边框1px.那么高度就是：13px.如果还加上padting:3px.要考虑
上下内边距=6.所以整体的高度就是：13+6=19px */

/* padding不会撑开盒子大小的情况 */
/* 特殊情况。如果这个盒子啊。没有宽度。则padint不会撑开盒子。
例：div 里面包一个p.p盒子的宽度会跟父级元素一样宽。定义p里面的paddting
不会影响p盒子的宽度 */

/* 外边距 */
margin-left: 100px;
margin-right: 100px;
margin-top: 100px;
margin-bottom: 100px;
/* 简写的方法跟padding完全一样 */

/* 让盒子对齐方式 */
/* 水平居中对齐的方式必须要两个条件:
1.必须要有宽度
2.左边外边距设置为:auto; */
margin:0 auto;
/* text-align: center;除了可以让文字居中对齐。还能让行内元素和行内块元素
居中对齐 */
text-align: center;

line-height: 190px;

/* 背景图片和插入图片的区别 */
/* 插入图片移动位置只能靠盒模型：padding 和 margin 两种方式
背景图片移动位置只能通过：background-position: 10px center; */

/* 注：行内元素为了照顾兼容性.尽量只设置左右内外边距。不要设置上下内外边距 */

/* 如果两个相邻的块元素垂直外边距的合并。
一个设置了margin-top: 100. 一个设置margin-bottom：50.两者的间距不会
变成150.而是取两个值中较大值。这种情况称为相邻快元素垂直外边距的合并; */
/* 【外边距塌陷】子元素设置了上外边距。会把自己和父级元素都拉下来。
嵌套关系。垂直外边边距合并解决方案 */
/* 1.可以把父级元素定义上边框。 */
border-top:1px solid transparent
/* 2.可以为父级元素定义一个上padding值 */
padding-top:1px
/* 可以为父级元素添加: (推荐)*/
overflow:hidden

/* 浮动 float*/
/* 1.普通流
块级元素会独占一行。从上向下顺序排列
常用元素：div hr p h1-h6 ul ol dl form table
行内元素: 会按照顺序。从左到右顺序排列。碰到父级元素边缘则自动换行；
常用元素:span a iem等
2.浮动
让盒子从普通流中浮起来。主要作用让多个块级盒子一行显示;
1.脱离普通标准流的控制、漂浮起来了。浮在标准流的上面
2.其他的盒子会顶替之前浮上去的盒子。
3.加了浮动这后。仍然是块级元素.但是属性类似：行内块元素。会自动把元素的inline-block
3.定位
将盒子在浏览器的某一个位置--CSS离不开定位。特别是后面的js特效
4.浮动元素之前是没有间隙的。
5.属性值
none:元素不符动
left:元素向左浮动
right:元素右浮动
6.如果父级元素的宽度装不下这些浮动的盒子。多出的盒子会另起一行对齐。
7.如果兄弟盒子。第一个盒子没有浮动。第二个盒子设置了浮动。不会浮到第一个的上面或者右边
浮动只会影响当前的或者是后面的标准流盒子。
如果一个盒子里面有多个盒子。如果有一个盒子设置了浮动。其它都要浮动。

为什么要清除浮动
因为父级盒子很多情况下。不方便给高度。但是盒子的浮动就不占有
位置。最后父级盒子的高度为-0的标准流盒子
根据子盒的内容自动显示高度

清除浮动的方法1
cloear:清除

left:清楚左侧浮动
right：清除右侧浮
both:同时清楚左右两侧浮动的影响
在子盒子浮动最后样增加
<div style="clear: both;"></div>
清除浮动的方法2
在父级盒子里面增加：
overflow: hidden;
如果用这个。文字过高会出现上下滚动条

清除浮动方法3【推荐使用】
.clearfix:after{
 content:"";
 display:block;
 height:0;
 visibility:hidden;
 clear:both;
}
/* IE 6 7 专用 */
/* .clear{*zoom:1} */

/* 清除浮动方法4：双伪元素清除 */
/* .clearfix:before,
.clearfix:after{
 content: "";
 display: table;
}
.clearfix:after{
 clear: both;
} */

/* 总结：在什么情况下需要清除浮动
1.父级元素没有高度
2.子盒子浮动了
3.影响下面布局了。就应该要清除浮动了 */

/* ****************定位**************** */
/* 定位模式
static:静态定位(在定位时基本不用)
relative:相对定位（原来在标准流的区域继续占有。）
absolute:绝对定位（完全不占位置。父级元素没有定位。则以
浏览器为准定位。如果跟着父级或者爷爷级定位。父级元素位置不变：把父
级元素的定位设置为：relative）
fixed:固定定位（完成不占位置。例头部的搜索或者中间的客服。
屏幕怎么动。他都不会动。跟父级定位没有任何关系）
子级是绝对定位。父级要用相对定位。只认浏览器的可视区域*/
/* 边偏移 */
/*
top:
left:
right：
bottom:
*/
/* 定位=定位模式+边偏移 */

/* 定位的扩展 */
/* 绝对定位的盒子居中对齐 */
/* 正常普通流的盒子利用：margin:auto就可以水平居中定位 */
/* 水平居中的left=父级盒的一半+自己的一半宽度 */
/* left:50%
让盒子往左走自己的一半
margin-left:-100px */

/* 堆叠顺序（权重） */
/* 只存在定位里面 */
/* z-index:100000 */

/* 定位改变display属性 */
/* 1.利用display inline-block
行内块不给width 默认的宽度就是内容的宽度
2.浮动也能转换
float:left
3.绝对定位(固定定位)也能转换
position:absolute */
}

/* 5.高级技巧 */
.gaoji{
display: none; /* 隐藏元素,并不占位置 */
display: block; /* 显示元素.将转换为行内块 */
visibility: visible; /* 对象可视 */
visibility: hidden; /* 隐藏元素,并保留位置 */

/* 溢出隐藏:
visible:默认值。不管是否溢出。还是都显示出来
hidden:当内容溢出当前元素的高度后.会自动隐藏后面的部分。
scroll:不管超出内容否。总是显示滚动条
auto:超出后。自动显示滚动条。不退出不显示滚动条
还能清除浮动
*/
overflow: hidden;
/* 当文字溢出.以...代替 */
/* 1.先强制一行内显示文本 */
white-space: nowrap;
/* 2.超出部分隐藏 */
overflow: hidden;
/* 3.文字用省略号代替超出的部分 */
text-overflow:ellipsis;

/* 鼠标样式 */
cursor: default;/* 默认的:小白箭头样式 */
cursor: pointer;/* 小手样式 */
cursor: move;/* 移动样式 */
cursor: text;/* 文本输入光标效果 */
cursor: not-allowed;/* 禁止点击输入 */

/* 轮廓线--当光标移到输入框周围的线 */
/* 注:修改输入框的边框线是通过边框进行修改.不是通过轮廓线 */
outline: none; /* 去掉轮廓线 */

/* 文本域之禁止拖拽文本域大小 */
resize: none;

/* 垂直居中对齐 */
/* 只针对行内元素和行内块元素 */
vertical-align: baseline; /* 默认是按基线对齐 */
vertical-align: middle; /* 默认是按垂直对齐 */
vertical-align: top; /* 默认是按顶部对齐 */
}

.img{
/* 去除图片底部有空白缝隙的问题 */
/* 原因:图片默认跟文字是以基线对齐.所以底部会有空白间隙 */
vertical-align: top;/* 只要不和基线对齐就行[推荐] */

/* 或者跟把元素改成块元素 */
/* 块元素对vertical-align: baseline是无效的 */
display:block;
}

/*css精灵技术*/
.icon{
width: 20px; 图标集里面小图标的宽度
width: 20px; 图标集里面小图标的高度
/* 图标集图片路径不平铺当前小图标在整个图片里面的坐标位置 */
/* background: url(image/icon_list.png) no-repeat x y; */
background: url(image/icon_list.png) no-repeat 10 100;
}</pre>
</div>
  
来源：https://www.cnblogs.com/wangbin0582/p/15004992.html

頁: [1]

琼殿技术论坛's Archiver

CSS学习总结