前端基础html、css重点难点总结【黑马web前端】

更新时间:2019年07月26日 11时15分42秒来源:黑马程序员论坛

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 …

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

上海中心

前端基础html、css重点难点总结【黑马web前端】

相关阅读