HTML与CSS学习笔记(2)
<p><strong>1、CSS背景样式？</strong><br>background-color 背景色<br>
background-image 背景图<br>
url（背景地址）<br>
默认：会水平垂直铺满背景图<br>
background-repeat 平铺方式<br>
repeat-x x轴平铺<br>
repeat-y y轴平铺<br>
repeat（x和y都进行平铺，默认值）<br>
no-repeat 都不平铺<br>
background-position 背景位置<br>
x y 如果为正数：图片就会往右和下进行偏移；如果为负数：图片往左和上进行偏移<br>
还可以用单词：<br>
x：left、center、right<br>
y：top、center、bottom<br>
还可以是百分数。<br>
background-attachment ：背景图随滚动条移动的方式<br>
scroll：默认值，跟着滚动条移动（背景位置是按照当前元素进行偏移的）<br>
fixed：固定，不随浏览器滚动条移动（背景位置是按照浏览器进行偏移的）</p>
<p><strong>2、CSS边框样式？</strong><br>
border-style：边框样式<br>
solid：实线；<br>
dashed：虚线；<br>
dotted：点线；<br>
border-width：边框大小<br>
px<br>
border-color：边框颜色<br>
red、#f00</p>
<pre><code>边框也可以针对某一条边进行单独设置：border-top-style；中间是方向，可以是left、right、top、bottom
颜色：透明颜色 transparent
</code></pre>
<p><strong>3、css文字样式？</strong></p>
<pre><code>font-family：字体类型
英文、中文
衬线体与非衬线体
注：
1、当字体名字中有空格的时候要用单引号引起来
2、多个字体类型的设置目的
font-size：字体大小
默认：16px
写法：number（px）、单词（small、large...不推荐使用）
注：字体大小一般为偶数
font-weight：字体粗细
模式：正常（normal）、加粗（bold）
写法：单词（normal）、数值（100 200....900；100-500都是正常的，600-900都是加粗的）
font-style：字体样式
模式：正常（normal）、斜体（italic）
注：oblique也是表示斜体，用的比较少
区别：1、italic：所有带有倾斜属性的字体的才可以设置
2、oblique没有倾斜属性的字体也可以设置倾斜操作
</code></pre>
<p><strong>4、css段落样式？</strong><br>
text-decoration：文本装饰<br>
下划线:underline<br>
删除线:overline<br>
下划线:line-through<br>
不添加任何样式：none<br>
注：添加多个文本修饰：line-through underline overline（空格隔开）</p>
<pre><code>text-transform：大小写转换，针对英文
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize
text-indent：文本缩进
针对首行缩进
em单位：相对单位，1em永远都是跟字体大小相同
text-align:文本对齐方式
对齐方式：left、right、center、justify（两端点对齐）
line-height：行高
什么是行高：一行文字的高度
组成：上边距、字体大小、下边距
第一行的下边距与第二行的上边距是等价重合的
默认行高：不是固定的，而是变化的，根据当前字体的大小而不断变化
取值：1、number（px）|scale（比例值，跟文字大小）
letter-spacing：字之间的间距
word-spacing：词之间的间距：针对英文单词的
英文和数字不自动拆行的问题：
强制拆行:(针对英文)
1、word-break：break-all（非常强烈的拆行）
2、word-wrap：break-word（不是那么强烈的拆行,会产生一些空白区域）
</code></pre>
<p><strong>5、css复合样式？</strong></p>
<pre><code>复合的写法是通过空格的方式实现的。复合写法有的是不需要关心顺序的，例如background和border，有的需要关心顺序，例如font。
1、background：red url（） repeat 0 0；
2、border：1px red solid；
3、font：
注：最少要有两个值size和family（要保证顺序）
weight、style、size、family（这种写法ok）
style、weight、size、family（也对）
style、weight、size/line-height、family（也对）
注：如果非要混合这写，要先写符合样式，再写单一样式，这样单一样式才不会被覆盖掉（就近原则）
</code></pre>
<p><strong>6、css选择器？</strong></p>
<pre><code>1、ID选择器
#elem{} id="elem"
注: 1、id值是唯一值：在一个页面中只能出现一次，出现多次是不符合规范的
2、命名规范：由字母、下划线、中划线、数字（并且第一个不能是数字）
3、驼峰写法：searchButtom（小驼峰） searchSmallButtom
短线写法：search-small-buttom
下划线写法：search_small_buttom
4、快捷写法：div#elem按回车或者tab键自动补全：<div id="elem"></div>
2、class选择器
.elem{} class="elem"
1、class选择器是可以复用的
2、可以添加多个class样式
3、多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序
4、标签+类的写法:如p.box(要连在一起写)
5、快捷写法：div.elem按回车或者tab键自动补全：<div class="elem"></div>
3、标签选择器(TAG选择器)
div{} <div></div>
使用的场景：
1、去掉某些标签的默认样式
2、复杂的选择器中，如层次选择器
4、群组选择器(分组选择器)
可以通过逗号的方式，给多个不同的选择器添加同一的CSS样式，来达到代码的复用
div,#text,.title{background: hotpink;}
5、通配选择器
*{}->div,h1,h2...{}
注：尽量不要使用通配选择器，因为会给所有的标签样式，慎用
使用的场景：
1、去掉所有标签的默认样式时，
6、层次选择器
后代 M N{} M与N空格隔开，M标签中所有的N标签都修饰
父子 M>N{} 只关注M标签直属下的N标签，不管N标签中嵌套的N标签
兄弟 M~N{} 选中当前M下面（不是嵌套在里面）的所有兄弟N标签
相邻 M+N{} 当前M标签下面相邻的第一个N的标签
7、属性选择器
M{}
=：完全匹配
*=：部分匹配
^=：起始匹配
$=:结束匹配
[][][]:组合匹配
8、伪类选择器
M:伪类{}
：link 访问前的样式 （只能添加给a标签）
：visited 访问后的样式 （只能添加给a标签）
：hover 鼠标移入的样式 （可以添加给所有的标签）
：active 鼠标按下时的样式 （可以添加给所有的标签）
注意：1、一般的网站都只设置hover：
a{} （link、visited、active） a：hover{}
2、四个属性都写的时候一定要注意顺序：L V H A
3、link visited只能给a标签加，hover和active可以给所有标签加
：after、：before 通过伪类的方式给元素添加一些文本内容,使用content属性
:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素:
#example:before {
content: "#";
color: red;
}
#example:after {
content: "$";
color: red;
}
:checked、：disabled、：focus 都是针对表单元素的伪类选择器
结构性伪类选择器
nth-of-type()、nth-child()
角标是从1开始的，1表示第一项，2表示第二项|n值 表示从0到无穷大（可以利用n来进行隔行换色的需求，2n表示偶数，2n+1表示奇数）
注：3n+1表示3个元素为一组，三个元素中的第一个元素被选中
first-of-type：
last-of-type：
only-of-type：当只有一个元素的时候对该元素修饰
nth-of-type()、nth-child()区别
type：类型
child：孩子
</code></pre>
<p><strong>7、css继承</strong><br>
文字相关的样式可以被继承:比如在div标签里面添加font-size和color样式，则div标签里的标签如p标签也会继承这些样式<br>
布局相关的样式不能被继承：（默认是不能继承的，但是可以设置继承属性）比如div标签里面的width等布局样式div里面的标签比如p标签不会继承</p>
<p><strong>8、css优先级</strong><br>
1、当设置相同样式时，后面的优先级较高（就近原则：谁更接近body标签谁更有效），但不建议出现重复设置样式的情况<br>
2、内部样式与外部样式<br>
内部样式与外部样式优先级相同，如果设置了相同样式，那么后写的引入方式优先级高<br>
3、单一样式的优先级：<br>
style行内>id>class>tag>继承</p>
<pre><code> 注：style行间 权重：1000
id 权重： 100
class 权重： 10
tag 权重： 1
4、!important
提升样式优先级：非规范方式，不建议使用。(是不能针对继承的属性进行优先级的提升)
5、标签+类与单类
标签+类>单类
6、群组优先级
(同一权重选择器时)群组选择器与单一选择器的优先级相同，靠后写的优先级高
7、层次优先级（尽量只写三层以内，超出三层就不符合规范了）
1、权重比较
ul li .box p input{}(这就是一个层次) 权重：1+1+10+1+1=14
.hello span #elem{} 权重：10+1+100=111
所以第二个层次优先级高
注：1与10与100是等级的意思，并不存在100个1等于一个100的情况
2、约分比较
ul li .box p input{} 约分后：li p input{}
.hello span #elem{} 约分后：#elem{}
</code></pre>
<p><strong>9、css盒子模型</strong></p>
<pre><code>组成(由内向外)：content->padding->border->margin
类比为快递 物品 填充物 包装盒 盒子与盒子之间的间距
content：内容区域 width和height组成的
padding：内边距（内填充）
只写一个值：30px（上下左右）
写两个值：30px 40px（上下、左右）
写四个值：30px 40px 20px 10px（上、右、下、左）
单一样式只能写一个值
padding-left
padding-right
padding-top
padding-bottom
margin：外边距（外填充）
只写一个值：30px（上下左右）
写两个值：30px 40px（上下、左右）
写四个值：30px 40px 20px 10px（上、右、下、左）
单一样式只能写一个值
margin-left
margin-right
margin-top
margin-bottom
注：
1、背景色会填充到margin以内的区域（包括padding、content、border，不包括margin）
2、文字内容在content区域显示
3、padding不能为负数，但是margin可以为负数
box-sizing：
盒尺寸：可以改变盒子模型的展示形态。
默认值：content-box：width、height->content（仅有content分配width和height）
border-box：width、height->content、padding、border（三者分配width和height）
使用的场景：
1、不用再去计算一些值（比如保持盒模型整体尺寸下加padding、margin等属性）
在不使用box-sizing的情况下加padding和margin会使盒子变大。
2、解决一些百分比的问题
盒子模型的一些问题：
1、margin叠加问题：出现在上下margin同时存在的情况下.回取上下中值较大的作为叠加的值
解决方案：
1、BFC规范
2、想办法只给一个元素添加间距
2、margin传递问题，出现在嵌套的结构中，只是针对于margin-top,即父元素会随着子元素移动，其他三个方向没有传递问题
解决方案：
1、BFC规范
2、给父容器加边框
3、margin换成padding
扩展：
1、margin左右自适应是可以的，但是上下自适应是不行的（有冲突），实现上下自适应之后学习
2、width、height不设置的时候对盒子模型的影响。会自动去计算容器（不用手动减去padding等值）的大小，节省代码。
</code></pre>
<p><strong>10、标签分类？</strong></p>
<pre><code>按类型：
block：div、p、ul、li、h1.....
特性：
1、独占一行
2、支持所有样式
3、不写宽的时候跟父元素的宽相同
4、所占区域是一个矩形
inline：span、strong、a、em、img..
1、挨在一起的
2、有的样式不支持，例如：width、height、margin和padding（某一方向不支持）
3、不写宽的时候，宽度有内容决定
4、所占的区域不一定是矩形
5、内联标签之间有空隙，原因：换行产生的,解决方案看例子（用font-size）
inline-block：input、select....
1、挨在一起，但是支持宽高
注：布局一般用块标签，修饰文本用内连标签
按内容：
Flow：流内容
Metadata：元素据
Sectioning：分区
Heading：标题
Phrasing：措辞
Embedded：嵌入的
Interactive：互动的
（详情https://html.spec.whatwg.org/multipage/dom.html）
按显示：
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容(比如img要通过具体属性来操作具体显示效果)
注意img虽然是inline，但也属于替换元素，具有替换元素的特性所以可以设置inline没有的宽高属性
非替换元素：将内容直接告诉浏览器，将其显示出来（如h1）
</code></pre>
<p><strong>11、显示框类型</strong><br>
display:none 不占空间的隐藏<br>
visibility: hidden; 占空间的隐藏</p>
<pre><code>display：block
display：inline-block
display：inline
</code></pre>
<p><strong>12、标签嵌套规范</strong><br>
ul、li<br>
dl、dt、dd<br>
table、tr、th、td</p>
<pre><code>块标签可以嵌套内联标签
<div>
<p></p>
</div>
块嵌套块（块标签不一定能嵌套块标签）
<div>
<div></div>
</div>
特殊：
p标签不能内嵌块标签
内联标签是不能嵌套块标签的
<span>
<div></div>
</span>
这是错误的
特例：
<a href="#">
<div></div>
</a>
</code></pre>
<p><strong>13、溢出隐藏</strong></p>
<pre><code>overflow：
visible：默认
hidden：隐藏
scroll：无论内容多少出现滚动条
auto：内容多时出现滚动条
x轴、y轴
overflow-x、overflow-y针对两个轴分别设置
</code></pre>
<p><strong>14、透明度与手势</strong></p>
<p>opacity：0（透明：占空间）~1（不透明）<br>
0.5（半透明）</p>
<pre><code> 注：占空间、所有字内容也会透明,rgba属性则不会
</code></pre>
<p>rgba():0~1</p>
<pre><code>注：可以让指定的样式透明而不影响其他样式
</code></pre>
<p>cursor：手势<br>
default:默认箭头<br>
要实现自定义手势：<br>
准备图片：.cur.ico(格式要求)<br>
cursor: url(../img/bilibili_16px_1188649_easyicon.net.ico),auto;</p>
<p><strong>15、最大、最小宽高</strong></p>
<pre><code>min-width、min-height：>=某个值，该范围内可自由伸缩
max-width、max-height;<=某个值，该范围内可自由伸缩
%单位：换算->以父(与爷爷(body)没关系)容器的大小进行换算的
一个容器怎么适应屏幕的高：容器加height:100%;body:100%;html:100%
html,body{height:100%；}
.container{height:100%;}
</code></pre>
<p><strong>16、css默认样式</strong></p>
<pre><code>没有默认样式：
span、div.....
有默认样式：
body->有margin默认样式
h1...h6->有上下margin默认样式
ul li->默认：margin：上、下 16px padding：左 40px
list-style:disc
p
a->text-decoration: underline;
注：有的默认样式便利，有的妨碍计算要清除
</code></pre>
<p><strong>17、css reset</strong></p>
<pre><code>简单的css reset方案：
*{margin：0；padding：0；}
优点：不用考虑哪些标签有默认的margin和padding
缺点：这样会稍微地影响性能
ul{list-style:none;}
a{text-decoration: none;}
img{display:block;}
内联的问题：图片跟容器底部有一定的空隙
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的
vertical-align: baseline;基线对齐方式、默认值
img{vertical-align: bottom;}解决方式是推荐的
写具体页面的时候或一个布局效果的时候：(一般的设计步骤 重点)
1、写结构（html）
2、css重置样式
3、写具体样式
</code></pre>
</div>
<div id="MySignature" role="contentinfo">
多抽出1分钟来学习，让你的生命更加精彩！<br><br>
来源：https://www.cnblogs.com/AhuntSun-blog/p/11982445.html
頁:
[1]