技术贴（css）【黑马web前端】

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

###一、文字控制属性小结

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
取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；
如果是汉语的文字要用引文状态的引号引起来；

2、Unicode字体
字体加粗 font-weight
如果要用数字来表示加粗或者不加粗，千万不能书写单位px；

3、字体样式(风格) font-style
实际开发中我们很少让文字倾斜，但是我们会让倾斜的i和em不倾斜；

4、文本水平居中 text-align: center;
text-align文本居中控制，取值：left、right、center；
text-align让文字在父级盒子里面居中显示；
文本的行高 line-height
line-height取值为数字+px单位，可以设置文字行与行之间的距离；
如何量取设计稿的行高？
从第一行文字的开始到第二行文字的开始就是行高

5、文本首行缩进 text-indent
text-indent首航缩进，取值为具体的像素值或者直接em，1em等于一个字的大小；
text-indent:2em;  首行缩进2个字；
6、字体的综合写法 font复合属性

注意:使用font的综合书写的时候一定要按照顺序书写，属性之间用空格隔开，如果没有的属性可以省略不写，文字大小和字体是必须要书写的，否则不生效；

实际工作中一般只用：font:文字大小字体；
7、文本线条装饰 text-decoration（死记硬背）
text-decoration:none;没有线
text-decoration：underline；下划线
text-decoration:line-through; 中划线/删除线
text-decoration:overline;上划线

###二、标签显示模式小结

实际开发的时候有的需要独占一行，有的需要一行放多个，所以把标签的显示模式分为以下三种：
块级元素：自己独占一行； ---代表标签 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  sdel  strong emi  ins 等；
注意：超链接里面不能嵌套超链接；
特殊情况a标签里面可以放块级元素，但是最好给a转换成块级模式；
行内块元素：
一行共存多个，默认宽高由内容撑开，但是可以控制固定的宽度和高度和外边距，内边距；
一句话总结：行内块元素可以一行共存多个，能够设置宽高并且生效；
三种显示模式相互转换
将元素转化为块级元素：display:block;
将元素转化为行内元素：display:inline;
将元素转化为行内块元素：display:inline-block;

###三、嵌套垂直外边距合并小结

问题环境
如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；

解决方案：
1、为父级设置上边框（不用）
2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；（不推荐使用）；
3、直接给父级添加overflow:hidden;（常用方法）---利用了overflow:hidden;强制区分了父子级关系

###四、清除浮动小结

清除浮动本质：父级盒子因为子级浮动引起内部高度为0的问题，清除浮动之后，父级就会根据浮动的盒子自动检测高度，从而解决影响下面盒子的布局问题；
解决方案
清除浮动的方法：额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动、固定高度法；
方法1：直接飞父级设置固定的高度，但是有时不方便设置高度，这样就不能使用这个方法；
额外标签法
在浮动元素的末尾（找到最后浮动的盒子）添加一个空的标签：
<div style=“clear:both;”></div>
书写方便，但是会添加许多没有意义的标签，不建议使用

方法2：父级加overflow属性法
直接给父级添加overflow:hidden;，强制的撑开父级的高度；

方法3：after伪元素法（会使用一直用）
After伪元素清除浮动法实际开发中推荐使用：
谁的子级盒子有浮动，我们就给谁添加，也就是在当前盒子的最后面添加一个空的盒子相当于我们的额外标签法；
/*声明清除浮动的样式*/
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
  }
.clearfix {
   *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
}

方法4：双伪元素清除浮动
/*声明清除浮动的样式*/
.clearfix:before ,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
         *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
}
谁里面有浮动就在谁的开始标签身上添加class=“clearfix”

五、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	软件测试入门到精通

全国中心

技术贴（css）【黑马web前端】

相关阅读

技术贴 （css）【黑马web前端】

相关阅读

技术贴（css）【黑马web前端】