CSS个人难点总结记忆【黑马web前端】

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

id选择器的命名规则：
不能用纯数字、数字开头的、中文命名；
类选择器和id选择器的区别：
类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称；
id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次；
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；
取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；

链接的伪类四种状态：
   a:link       未访问的链接（访问前）
   a:visited 已访问的链接（访问后）
   a:hover    鼠标移动到连接上（鼠标经过）
   a:active    选定的链接（按下鼠标的时候）
注意：以上的顺序不能颠倒；
实际工作中我们不需要将四个伪类状态都书写，如果4个都要写顺序不能乱；

标签显示模式（重点要理解）
实际开发的时候有的需要独占一行，有的需要一行放多个，所以把标签的显示模式分为以下三种：
   块级元素：自己独占一行； --- 代表标签 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 等；
注意：超链接里面不能嵌套超链接；
   特殊情况a标签里面可以放块级元素，但是最好给a转换成块级模式；
行内块元素：
一行共存多个，默认宽高由内容撑开，但是可以控制固定的宽度和高度和外边距，内边距；
一句话总结：行内块元素可以一行共存多个，能够设置宽高并且生效；
三种显示模式相互转换
将元素转化为块级元素：display:block;
将元素转化为行内元素：display:inline;
将元素转化为行内块元素：display:inline-block;
实体化三属性（重要滴很）
宽 width
高 height
背景 background
注意：这三个属性属于我们布局的中流砥柱，只要这三个值设置好了，我们书写的网页就很少出现兼容问题；

测量方法：从一行的顶线到另以行的顶线

背景的复合写法（死记硬背）
background:背景颜色  url（）  平铺方式  是否固定  X轴  Y轴；
注意：属性值没有书写顺序，没有的属性可以省略不写；
实际工作中建议大家使用复合写法；
分为：层叠性（覆盖性）、继承性、优先级；

盒子模型组成
   内容：  实体化宽高和里面的文字图片等等
   边框：  border
  内边距： padding 拉开内容到盒子边缘的距离；
  外边距： margin 拉开盒子与盒子之间的距离；

在调试工具里面  橙色表示外边距margin，黄色边框表示border，绿色色表示内边距padding，蓝色表示内容

Csss设置细线表格（死记硬背）
table,th,td{
   border:1px #ccc solid;
   border-collapse:collapse;
}
border-collapse:collapse;合并相邻的边框
注意：如果整个页面只有一个table我们直接写table样式，如果有多个我们可以给table设置一个父级用后代选择器去书写；

插入图片和背景图片区别（记住）
内容一般用插入图片，装饰性的小图标一般用背景图片；
插入图片移动位置要使用盒子模型的外边距margin和内边距padding设置；
背景图片移动位置用背景图片额度定位background-position进行设置；
并列垂直外边距合并（重点）
两个盒子如果垂直排列（上下排列），上面的盒子设置了marin-bottom,下面的盒子设置了margin-top，最终显示的样式两个值谁大就显示谁；
解决方案：不要同时设置，只给一个盒子设置即可；
嵌套垂直外边距合并
问题环境
如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；

解决方案：
1、为父级设置上边框（不用）
2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；（不推荐使用）；
3、直接给父级添加overflow:hidden;（常用方法）--- 利用了overflow:hidden;强制区分了父子级关系
盒子阴影
语法：
box-shadow: 水平阴影垂直阴影模糊距离阴影大小阴影颜色  内/ 外阴影；
水平阴影：让阴影在水平方向位移
垂直阴影：让阴影在垂直方向位移
模糊距离：阴影的羽化（虚实）大小
阴影大小：设置阴影的大小，一般不设置
阴影颜色：设置阴影的颜色
内/ 外阴影：默认是外阴影  ，inset是设置内阴影

文字阴影
语法：
text-shadow: 水平阴影垂直阴影模糊距离阴影大小阴影颜色  内/ 外阴影；
水平阴影：让阴影在水平方向位移
垂直阴影：让阴影在垂直方向位移
模糊距离：阴影的羽化（虚实）大小
阴影大小：设置阴影的大小，一般不设置
阴影颜色：设置阴影的颜色
内/ 外阴影：默认是外阴影  ，inset是设置内阴影

实际的导航布局
Html结构
• 实际开发中导航栏默认用ul嵌套li，li嵌套a标签完成；
这么做的好处
01 li嵌套a语义清晰；
02 如果直接用a，搜索引擎会认为你是关键字堆叠从而降权网站的引擎权限，影响排名；
03  友情链接类似的小导航可以直接用a链接完成；9、关于图片插入底部留白
Html中插入图片的时候会出现2-4px的底部留白
解决方案：01、给所有的图片img设置一个vertical-align: middle;让图片的对齐方式为中心基线对齐；

将图片转换为块元素display:block;  --  不建议使用

列表布局父级盒子装不下最后一个掉下来问题
布局的时候我们的版心是固定的，如果给子级盒子添加了margin-left或者margin-right，最后一个子级盒子会掉下来，
解决方案：直接给父级盒子的宽度大于版心盒子即可；
banner 滚动图片的布局思路（重要）
一个父级盒子作为总体的大盒子，然后里面的滚动图片用ul>li>a实现，两侧的小箭头一般我们用单独的span或者div实现（css里面用子绝父相进行定位实现），切换的小圆点用ol>li实现（css里面用子绝父相将ol进行定位，然后将里面的li浮动控制外边距即可）；
Current是默认选中的样式

display显示与隐藏（重点）
• 隐藏：display:none; === 属于不占位隐藏
• 显示：display:block; 将隐藏的元素显示出来
visibility显示与隐藏
• 占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；
overflow溢出隐藏
• overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；
• overflow:scroll; 显示横向和竖向的滚动条显示（不用）；
• overflow:auto;溢出滚动，将超出固定宽高范围的内容以滚动条的形式显示（不用）；
实际工作中overflow:hideen;的用法（重点）
用户界面-鼠标样式
• 鼠标样式：cursor
• 小白（默认） cursor:default;
• 小手： cursor:pointer;
• 移动： cursor:move;
• 文本： cursor:text;
• 禁止： cursor:not-allowed;
用户界面-input轮廓线( 重要)
• 表单元素默认选中的时候会有一个蓝色的边框，各个浏览器设置是不一样的，所以我们在开发过程中直接去掉就可以，代码如下：
我们直接在css的最上面设置公用的样式：
input {
outline:none;
}
用户界面- textarea防止拖拽文本域( 重要)
• Textarea 文本域默认有轮廓线也可以统统outline:none;取消，同时还存在右下角拖拽放大，我们一般不允许，需要设置不能拖拽，可以通过resize:none;进行设置；
我们直接在css的最上面设置公用的样式：
textarea{
outline:none;
resize:none;
}
vertical实现图片和文字垂直对齐
• vertical-align:middle;让行内元素、行内块元素垂直居中；
• 常见的行内元素：a、span
常见的行内块元素：img,input
注意：如果直接添加vertical-align:middle;不生效我们可以直接给父级盒子添加对应行高即可；
   我们一般在css的最顶部设置一个公用样式就可以，能解决2问题：第一个问题图片垂直居中，第二个问题，解决图片底部留白；
去除图片底侧空白缝隙
• Html中插入图片的时候由于默认是基线对齐，会出现底部留白的效果，解决方案如下：
• 01 直接给图片添加img{vertical-align:middle/top;}属性实现基线对齐；
• 02 直接将图片的显示模式更改为块级元素img{display:block;}
溢出的文字省略号显示（一定要会写）
• white-space:normal; 默认处理，文字一行显示不下就折行显示；
• white-space:nowrap; 强制一行显示，文字一行显示不小就强制显示，要配合overflow:hidden; 使用，然后想要出现省略好配合下面属性：
• text-overflow:clip; 不显示省略号，直接裁剪；
text-overflow:ellipsis; 隐藏的内容以省略号显示；
（重要的）让超出固定宽的的文字内容以省略号显示三部曲
第一步：让文字强制一行显示：white-space:nowrap;
第二步：让超出范围的文字隐藏： overflow:hidden;
第三部：隐藏的内容以省略号显示；text-overflow:ellipsis;
使用精灵图的方法（重要）
第一步 --- 确定使用图标的大小，也就是量取图标的宽高
第二步 ----  引入精灵图作为背景图片，然后使用背景图片定位设置X和Y轴的位置

制作精灵图（了解）
• 我们精灵图上放的都是小的装饰性质的背景图片。插入图片不能往上放。
• 我们可以横向摆放也可以纵向摆放，但是每个图片之间留有适当的空隙。
• 在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。
注意：在制作精灵图的是分辨率一律设置为72，导出图片的时候最好的透明的PNG格式；
滑动门原理
• 一个父级盒子（必须设置为行内块元素display:inline-block）嵌套一个子级盒子，父级盒子放左侧的圆角，子级盒子放右侧的盒子装内容；
• 设置父级盒子的背景图片，设置图片的左对齐默认即可；
   background: url(images/to.png) no-repeat;
• 盒子的宽度是内容撑开的，需要给父级盒子和子级添加padding-left和padding-right；
• 子级盒子盛放内容，然后设置子级盒子的背景图片，设置图片右对齐；
   background: url(images/to.png) no-repeat top right;
盒子边框突出显示效果
想要实现两条边框重叠我们直接用margin-left:-1px;和margin-top:-1px;来实现，如果想要实现鼠标经过突出当前盒子的线条样式分两种情况：
情况1：如果我所有的盒子都在标准流里面，我们只需要设置鼠标经过当前盒子的时候，给当前盒子添加一个position: relative;相对定位（相对定位是不会改变盒子的显示模式的还占位）实现突出效果；
情况2：如果所有的盒子已经设置了定位属性，我们只需要设置鼠标经过当前盒子的时候更改当前盒子的z-index值，修改盒子的堆叠层次，z-index值越大盒子就会越上面；
css实现三角形效果
第一步，设置盒子的宽度高度为0
第二步，设置边框的宽度粗细border-width，最终显示为三角形
边框的线条样式 border-style
第三步，设置边框的颜色 border-color，4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了；
第四步，为了照顾兼容性低版本的浏览器，加上 font-size: 0; line-height: 0;

推荐了解热门学科

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前端】

相关阅读