CSS基本内容

布局应该注意的地方
在开始布局之前,把浏览器的内外边距清零 */
*{
padding: 0px;
margin: 0px;
}
快捷键 注释快捷键：ctrl + / 取消注释： ctrl + z
HTML 编写快捷键 例如:
ul.header> li.header-1{元素内容} *10
ul 的class=“header”, li 的class="header’, 花括号里面的是元素内容，*10 代表有10个 li 项
父元素和子元素之间用大于号 >
ul #header> li #header-1{元素内容} *10
ul 的 id =“header”, li 的 id ="header’, 花括号里面的是元素内容，*10 代表有10个 li 项
一、CSS的创建和引入加粗样式
样式有三个来源
一是外部样式，link 引入 ，优先级最低
二是内部样式， 优先级次之
三是行内样式<p style="color=“red” ; ">

, 优先级最高

二、CSS的字体，文本控制

字体颜色,color属性,进行设置
文本的对齐方式,text-align属性进行设置,属性值有center,right,left,justify(两端对齐);
设置行高:line-height:20px;行与行之间的空间;
如果想要文本在一行的正中间,line-height的高度要和文本height的高度一致
设置字符之间的间距,letter-spacing,字符之间的空间
设置词间距,word-spacing,单词之间的空间,一般是用在英语单词上;
文本修饰,text-decoration: none;用来设置或者删除链接的下划线; underline加上下划线
文本粗体，font-weight:属性值：normal(默认)，bold(粗体)/数字值：100-900；
文本大小，font-size:属性值(em/px;16px=1em);
文本字体，font-family
复合写法，font
首行缩进：text-indent: 2em;首行缩进2个字符——2em;

列表样式——无序列表——有序列表
列表样式:list-style:none;属性值(none,) 去除列表的圆点，排序
border-collapse: ;边框是否折叠成单一边框
colspan=""合并列
rowspan="2"合并行

三、border 属性和字体阴影
border-color: ;属性为边框指定颜色
border-width: ;属性为边框指定宽度
border-style: ;边框样式属性，为边框指定要显示什么样的边界，（dotted:点线边框；dashed：虚线边框；solid：实线边框；double：双边框；）
简写：border，颜色，宽度，样式；

文字阴影，text-shadow:有四个属性值，（x 轴阴影位置，y 轴阴影位置，阴影范围，阴影颜色）左下右上；text-shadow: #FFFF00 5px 5px 10px;

圆角属性设置：border-radius:可以和任何元素设置圆角
可以设置四角，
四个角顺序是：左上角，右上角，右下角，左下角
三个角顺序是：左上角，右上角右下角，左下角
两个角顺序是：左上角右下角，右上角左下角（对角线）

box-shadow:属性设置元素的阴影：
box-shadow:属性值有六个，（水平方向x轴，垂直方向y轴，模糊距离，颜色，内外）模糊距离里面有一个模糊范围，一般不设置，内外阴影默认值outset,可以设置成inset

四、背景background设置
有专门的拾取颜色的工具：屏幕捡取器
background-color属性定义背景颜色，一般简写为background;
设置背景色：英文单词，十六进制，rgb 颜色

背景颜色透明度; rgba(前三位是颜色值，最后一位是透明度，取值范围0—1；)
h1{background-color: rgba(40,41,35,0.1);}

背景的线性渐变,从上到下：语法:background: linear-gradient(角度, color, color…);45deg,45度角
hr{
height: 15px;
background: linear-gradient(pink,blue);
}
/* 对角 */
div {

height: 400px;

background: linear-gradient(45deg, red, yellow);
}

背景的径向渐变，从中间向两边扩散的渐变语法：background: radial-gradient(开始颜色,…,终止颜色)
h2{
background: radial-gradient(red,yellow);
}

背景图片设置语法：background: url(路径);/background-image: url(路径)
设置图片水平平铺或垂直平铺,语法:background-repeat: repeat-x;/repeat-y;/no-repeat;
设置图片背景定位,语法:background-position: left top;
五、选择器—盒子模型——块级元素、行内元素、行内块元素

选择器分组：被分组的选择器就可以享受相同的声明 ,用逗号把选择器分开
h1,h2,p{
background: #0000FF;
}
标签之间用逗号隔开

选择器的继承问题,子元素可以继承父元素的样式,
例如body是最大的父元素,h1,h2,p标签就会继承body的样式
body {
background: red;
}

• 是css 的通配符,代表页面的所有标签都有的属性,所有的标签都遵循的样式
  类选择器:class=""，标签前带 . 符号,如:.head{} 可以在多个元素中使用*/
  id 选择器:id="" ,标签前带 # 符号,如: #head-1{} ,id选择器名称是唯一的 */

派生选择器,通过元素在其位置的上下文的关系来定义样式,可以使标记更加简洁 ,
派生选择器包括，后代选择器，子元素选择器，相邻兄弟选择器
后代选择器
div span{
color: #FFC0CB;
}

子元素选择器
父元素和子元素之间用 > 大于号联系,只能控制下一级子元素,不能控制下下一级
div>span{
color: green;
}
div>i {
color:red;
}
如上面所示,div>i 没有起作用 ，i 标签在span 标签内部

相邻兄弟选择器,两者要有相同的父元素,中间用 + 联系;
h3+h4{
color: #FFA500;
}
属性选择器,对带有指定属性的 html 元素设置样式
[title]{
color: #0000FF;
}
属性和值选择器
[title=red]{
color: red;
text-decoration: none;
}
选择器匹配
定义和用法
:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。提示：等同于 :nth-of-type(1)。

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. n 可以是数字、关键词或公式。

:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是数字、关键词或公式。

:nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数。
n 可以是数字、关键词或公式。
例子 第一个
.item:first-of-type{
align-self: flex-end;
}
第二个
.item:nth-of-type(2){
align-self: center;
}
倒数第一个
.item:nth-last-child(1){
align-self: center;
}
倒数第二个
.item:nth-last-of-type(2){
align-self: flex-end;
}

item1

item2

item3

item4

item5

item6

块级元素，能够识别宽高，独占一行，多个块级元素写在一起，默认排序是从上到下；
块级元素有，h1-h6,p,div,li,等常用块级元素；

行内元素，默认不会自动换行；设置宽高无效；对margin 设置仅左右有效，上下无效；
元素内的内容可以撑开行内元素；

行内块元素，不自动换行，可以识别宽高，元素内容排列顺序从左到右；
img 标签既可以设置宽高，也可以从左到右排列，不自动换行；

display:规定元素应该生成框的类型
display:inline; 转换成行内元素；
display:block; 转换成块状元素；
display:inline-block; 转换成行内块元素；

padding 内边距
当div没有设置宽高时，给padding设置高度，可以把div撑开的，撑开元素内容；元素内容到边框的距离就是内边距；
padding：40px; 顺序是上右下左，都是40px;
padding:40px 30px 20px; 上，左右，下
padding:40px 30px; 上下，左右

margin：外边距；
边框border到外边的距离就是外边距 ，上，右，下，左；
可以设置为auto（自动），意思是等宽空白

margin：40px; 顺序是上右下左，都是40px;
margin:40px 30px 20px;  上，左右，下
margin:40px 30px;  上下，左右

上下是50px的外边距，auto 意思是左右同样的宽度空白；相当于是div 元素居中显示；
{ margin: 50px auto;}

六、布局——定位——伪类
固定定位fixed,position:flex;元素的位置相对与浏览器窗口是固定定位;导航栏布局时可能会用到；
position :fixed 运用场景：

1.网页两侧浮动窗口(播放器,置顶按钮,浮动广告，功能按钮等)
2.导航栏浮动置顶。
3.隐藏div实现弹窗功能(登陆注册界面)
4.全屏背景（图片，视频等）
相对定位relative,position:relative;相对其正常的位置,就是和元素原来的位置做比较的
使用相对定位时会覆盖到其他的元素,解决这个问题需要用到z-index:(整数);

绝对定位:absolute;
1.绝对定位的元素的位置相对与最近的已定位父元素的位置
2.如果元素没有已定位的父元素,那么它的位置相对与初始包含块;
如，.two 已经定位为relative，是.three 的父元素，所以当.three设置为absolute时，.three 的位置是相对与.two设置的
3.特点绝对定位使元素的位置与文档流无关,所以不占据空间 ；
相对定位元素经常被用作绝对定位元素的容器块

z-index 属性设置元素的堆叠顺序，仅能在定位元素上使用；该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
z-index:可以设置元素的叠加顺序，但依赖定位属性。 z-index只作用于带有定位属性的元素。
z-index大的元素会覆盖z-index小的元素
z-index为auto的元素不参与层级比较；
z-index为负值，元素被普通流中的元素覆盖
number设置z-index大小，number越大z-index越大。
属性值为auto，默认值，堆叠顺序与父元素相等；
属性值为number（整数如-1，1，2），设置元素的堆叠顺序；
属性值为inhert，继承父元素的z-index的值；

float:left;浮动,属性值为left 和 right ;
特点：浮动的框可以水平方向移动，直到它的外边缘碰到包含框或者另一个浮动框的边缘为止；
浮动使元素的位置与文档流无关，因此不占据空间；
如果想要前一个元素设置的浮动对自身没有影响的话,那么需要清除浮动;
清除浮动clear:both;

text-overflow:属性规定文本溢出包含元素时发生的事情
属性值为：
ellipsls:显示省略符号来代表被修剪的文本
clip ： 修剪文本

overflow 属性规定当内容溢出元素框时发生的事情。
这个属性定义溢出元素内容区的内容会如何处理。

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

white-space：属性设置如何处理元素内的空白
属性值nowrap 文本不会换行，文本会在同一行上继续，直到遇到br 标签为止；
inherit：规定应该从父元素继承 white-space的值；

overflow: hidden;text-overflow: ellipsis;这两个元素结合使用让溢出的文本以省略号显示;
white-space: nowrap;
这三个元素一起使用，先让元素不会换行，然后让溢出的文本隐藏起来，再把隐藏的文本仪省略号表示；

伪类：hover是伪类的一种，语法是标签：hover{}；
例如：a:hover{}; 鼠标在 a 链接上悬浮会出现什么效果

列表项上设置下拉菜单，属于二次嵌套，例如：

• 苹果
  • 栗子
  • 栗子
  • 栗子

  • 		</ul>
    		</li>
    		
                      <li>苹果</li>
    		<li>苹果</li>
    		<li>苹果</li>
    		
          </ul>
    

如果想要隐藏下拉菜单可以设置：li ul{display: none;}
鼠标点击时显示下拉框：li:hover ul{display: block;}
ul li{
去除圆点 list-style: none;
设置宽高 width: 100px; height: 40px;
背景颜色 background: #AFEEEE;
左浮动，使 li 列表项在一行排序 float: left;
右外边距 margin-right: 10px;
文本居中 text-align: center;
文本上下左右都居中，行高和高度一致 line-height: 40px;
}

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property: 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function （liner相同速度/ease 先慢 中间快， 结束慢）规定速度效果的速度曲线
transition-delay 定义过渡效果何时开始
过渡属性通常和其他属性值一起使用，多个属性结合使用，中间用逗号隔开,设置宽度属性值,过渡时间是2s，例如：
p{
width: 300px;height: 200px;background: #FFA500;
transition: width 2s;
}
p:hover{width: 500px;}
当鼠标移上时,宽度过渡变成500px; 过渡属性transition和hover属性组合使用；