黑马程序员技术交流社区
标题:
前端基础html、css重点难点总结
[打印本页]
作者:
xuji11
时间:
2019-6-8 00:31
标题:
前端基础html、css重点难点总结
1、文字控制属性（死记硬背）
文字颜色 color
Color取值
a、直接写英文单词yellow，red等等
b、16进制表示#aabbcc或者#abc
c、rgb（）如rgb（0，0，0）
d、rgb（）如rgba（0,0,0,0.5）a为透明度
常用测试颜色16进制：
黑色系列：#000； #333； #666； #999；
灰色系列：#ccc； #eee； #ddd； #dedede；
红色：#f00；
文字大小 font-size
文字字体 font-family
文本水平居中 text-align: center;
text-align文本居中控制，取值：left、right、center；
text-align让文字在父级盒子里面居中显示；
文本的行高 line-height
line-height取值为数字+px单位，可以设置文字行与行之间的距离；
如何量取设计稿的行高？
从第一行文字的开始到第二行文字的开始就是行高
文本首行缩进 text-indent
text-indent首航缩进，取值为具体的像素值或者直接em，1em等于一个字的大小；
text-indent:2em; 首行缩进2个字；
2、标签显示模式（重点要理解）
实际开发的时候有的需要独占一行，有的需要一行放多个，所以把标签的显示模式分为以下三种：
块级元素：自己独占一行； --- 代表标签 div、h标签
行内元素：一行可以共存多个；--- 代表标签 span 、a
行内块元素：一行可以共存多个； --- 代表标签 img 、 input
块级元素(死记硬背)
特点：独占一行，设置宽高能够生效，也可以控制外边距和内边距；
默认的宽度是父级的100%；
是一个容器盒子，里面可以放行内或者块元素；
注意：p标签是块级元素，但是p标签里面不能放div标签；
同理h标签（标题标签）dt等都是文字类块级标签，里面尽量不能放其他块级元素；
常见的块级元素：div/p/h1-h6/ul/li/dl/dt/dd
行内元素(死记硬背)
特点：01、一行可以共存多个，设置宽高不生效，一般宽高是自己本身的内容撑开；
02、行内元素里面最好只放文本或者其他的行内元素；
常见的行内元素：a span u s del strong em i ins 等；
注意：超链接里面不能嵌套超链接；
将元素转化为块级元素：display:block;
将元素转化为行内元素：display:inline;
将元素转化为行内块元素：display:inline-block;
3、background属性
背景颜色background-color：
background-color取值是具体的色值
background-color: #0ff;
背景图片background-image：
background-image取值是url(图片路径)
background-image: url(img/03.jpeg);
背景平铺background-repeat：
background-repeat
取值： 平铺：repeat 不平铺：no-repeat
X轴平铺：repeat-x Y轴平铺：repeat-y
图片定位background-position：
background-position:X坐标（水平方向） Y坐标（垂直方向）；
方位名词取值：
可以是纯数字+px也可以是方向英文（top/bottom/left/right）;
方位名词left和right只能控制水平方向（X轴）
方位名词top个bottom只能控制垂直方向（Y轴）
方位名词center可以同时控制水平和垂直的方向
注意：如果使用方向英文只写一个值另外一个值就默认居中，所以两个值建议都写；
精确取值
background-position:X坐标（水平方向） Y坐标（垂直方向）取值如果去精确单位，第一个是X轴的值，第二个是Y轴的值，如果只写了一个值就表示X轴，Y轴默认为center；
背景图片固定：
background-attachment:fixed;
背景图片定位是咩有父级的；
8、背景的复合写法（死记硬背）
background:背景颜色 url（） 平铺方式 是否固定 X轴 Y轴；
注意：属性值没有书写顺序，没有的属性可以省略不写；
实际工作中建议大家使用复合写法；
4.11、Css的三大特性
分为：层叠性（覆盖性）、继承性、优先级；
层叠性（覆盖性）
层叠性（就近原则）：如果一个标签书写的样式重叠冲突了，后写的css样式会把先写的样式覆盖掉，样式不冲突的话就不会层叠；
继承性
有一些css属性子级是可以继承父级的，一般文字控制属性都会被继承，a标签除外，需要单独设置；
一般文字的属性：下图蓝色的可以被继承，颜色也是可以被继承，只不过超链接a不能继承父级的颜色color；，超链接a的color和线条样式text-decoration需要单独设置；
5Css权重
第一等：代表内联样式，如: style=””，权值为1000。 1,0，0,0
第二等：代表ID选择器，如：#content，权值为100。 0,1,0,0
第三等：代表类，伪类和属性选择器，如.content，权值为10。 0,0,1,0
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。 0,0,0,1
特等 !important 提高权重，有提权的效果，有了样式优先生效； 老大
第五等 继承性 权重值为0 0,0,0,0
计算盒子实际大小（死记硬背）
6.盒子的实际大小：内容的宽和和高度+内边距+边框；
盒子撑大问题（死记硬背）
问题：如果盒子有固定的宽高的情况下，添加了边框和内边距，盒子的实际大小会变大；
解决方案：添加了多少就减去多少； ----- 加多少减多少
让盒子居中的条件（注意）
01 盒子的显示模式必须为块级元素
02 盒子必须要有固定的宽度
03 利用margin：上下 auto；/ margin：auto；/ margin-left:auto; margin-right:auto;
注意：上下的值可以自定义设置，如果没有设置为 margin:0 auto;
5、text-align: center;和margin:auto;的区别
01、margin只能让块级元素居中显示，而且必须要有固定的宽度
02、text-align: center;本来的意思是让文本居中，实际也可以让行内元素、行内块元素居中显示，如果想要用text-align: center;让行内元素和行内块元素居中，我们必须要有一个父级元素将行内元素和行内块元素包裹起来，然后设置父级盒子的text-align: center;，但是实际工作中我们不建议这么使用；
7、插入图片和背景图片区别（记住）
内容一般用插入图片，装饰性的小图标一般用背景图片；
插入图片移动位置要使用盒子模型的外边距margin和内边距padding设置；
背景图片移动位置用背景图片额度定位background-position进行设置；
•实际开发中导航栏默认用ul嵌套li，li嵌套a标签完成；
•给li设置固定的宽高（如果文字不一样多我们可以不设置宽度，用padding撑开）
•然后给li设置float:left;让li在一行显示
•如果想要鼠标经过a有一些样式，将a用display:block;转化为块元素，设置宽高和li一致；
7、浮动元素与父盒子的关系
•浮动之后的子元素是以父级盒子为参照对齐的，不会与父级的边框重叠，也不会超出父级盒子的内边距；
8、浮动元素与兄弟盒子的关系
•1、浮动元素和兄弟盒子都浮动了两个盒子都会在一行显示；
•2、做布局的时候所有的盒子必须都浮动，才能完成效果；
•3、浮动的元素顶端对齐，两个元素之间没有缝隙
9、关于图片插入底部留白
Html中插入图片的时候会出现2-4px的底部留白
解决方案：01、给所有的图片img设置一个vertical-align: middle;让图片的对齐方式为中心基线对齐；
10、清除浮动的影响
问题描述
在布局的时候如果父级盒子没有设置固定的高度，里面的子级盒子进行浮动设置，父级盒子就不会被撑开，就会影响我们后面的盒子布局；
清除浮动本质：
父级盒子因为子级浮动引起内部高度为0的问题，清除浮动之后，父级就会根据浮动的盒子自动检测高度，从而解决影响下面盒子的布局问题；
解决方案
清除浮动的方法：额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动、固定高度法；
方法1：直接飞父级设置固定的高度，但是有时不方便设置高度，这样就不能使用这个方法；
1、css属性书写顺序
1、布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2、自身属性：width / height / margin / padding / border / background
3、文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4、其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2