前端与移动开发蒋亚凯技术贴【黑马web前端】

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

标签显示模式（重点要理解）
实际开发的时候有的需要独占一行，有的需要一行放多个，所以把标签的显示模式分为以下三种：
   块级元素：自己独占一行； --- 代表标签 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
注意：这三个属性属于我们布局的中流砥柱，只要这三个值设置好了，我们书写的网页就很少出现兼容问题；
实际工作中导航的布局思路1 – 利用行内块元素
注意：此方法在实际工作中不用；
一个div父级盒子一般命名为nav，嵌套ul，ul嵌套li，li嵌套a，然后让li在一行显示（将其转换为行内块）设置宽高，然后将li里面的a转换为块元素（display:block;）设置宽高和li一致；
设置鼠标经过a的时候样式；
然后设置nav的text-align: center;让所有的li居中显示；
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轴；
注意：属性值没有书写顺序，没有的属性可以省略不写；
实际工作中建议大家使用复合写法；

9、超大的背景图设置
实际工作中电脑的分辨率是不同的1920/1600/1440/1366……我们设计师在制作图片的时候一般是按照1920来设计；
解决方案：
一般情况下我们用大背景图是为了匹配不同的分辨率的屏幕，所以图片越大越好，但是我们用背景插入图片之后需要将图片的位置进行位置调节，让图片的中间位置显示出来，可以是用 background-position: center  0；表示X轴（水平方向居中），Y轴（垂直方向贴顶）；
10、背景颜色半透明（css3的新属性，记住）
background：rgba(0,0,0,透明度);
• R红色 g绿色 b蓝色  a透明度小数点前面的0可以不写；
• 注意：设置了背景颜色透明是不会影响盒子里面的内容的透明度的；
11、 Css的三大特性
分为：层叠性（覆盖性）、继承性、优先级；
层叠性（覆盖性）
层叠性（就近原则）：如果一个标签书写的样式重叠冲突了，后写的css样式会把先写的样式覆盖掉，样式不冲突的话就不会层叠；
继承性
有一些css属性子级是可以继承父级的，一般文字控制属性都会被继承，a标签除外，需要单独设置；
一般文字的属性：下图蓝色的可以被继承，颜色也是可以被继承，只不过超链接a不能继承父级的颜色color；，超链接a的color和线条样式text-decoration需要单独设置；

推荐了解热门学科

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

上海中心

前端与移动开发蒋亚凯技术贴【黑马web前端】

相关阅读