位置:搜学搜课 > 新闻 > 南宁口碑好的web前端网课培训有哪些
前端课程全面升级为Web前端全栈式
Web 全栈工程师
科技从未停下前进的脚步,Web前端全栈式强势来袭!
参与企业真实的项目积累实战经验
用作品说话,让你的简历丰富多彩
参与企业真实的项目积累实战经验
从实战中走出的讲师,传授真实项目经验
今天小编要跟大家分享的文章是关于Web前端入门基础-CSS的基础知识点学习。正在学习web前端技术的小伙伴们来和小编一起看一看吧,希望本篇文章能够对你有所帮助。
一、流
“流”又叫文档流,是css的一种基本定位和布局机制。流是html的一种抽象概念,暗喻这种排列布局方式好像水流一样自然自动。“流体布局”是html默认的布局机制,如你写的html不用css,默认自上而下(块级元素如div)从左到右(内联元素如span)堆砌的布局方式。
二、块级元素和内联元素
这个大家肯定都知道。
块级元素是指单独撑满一行的元素,如div、ul、li、table、p、h1等元素。这些元素的display值默认是block、table、list-item等。
内联元素又叫行内元素,指只占据它对应标签的边框所包含的空间的元素,这些元素如果父元素宽度足够则并排在一行显示的,如span、a、em、i、img、td等。这些元素的display值默认是inline、inline-block、inline-table、table-cell等。
实际开发中,我们经常把display计算值为inline inline-block inline-table table-cell的元素叫做内联元素,而把display计算值为block的元素叫做块级元素。
三、width:auto和height:auto
width、height的默认值都是auto。
对于块级元素,width:auto的自动撑满一行。
对于内联元素,width:auto则呈现出包裹性,即由子元素的宽度决定。
无论内联元素还是块级元素,height:auto都是呈现包裹性,即高度由子级元素撑开。但是父元素设置height:auto会导致子元素height:百分比失效。
流体布局之下,块级元素的宽度width:auto是默认撑满父级元素的。这里的撑满并不同于width:的固定宽度,而是像水一样能够根据margin不同而自适应的宽度。
css的属性非常有意思,正常流下,如果块级元素的width是个固定值,margin是auto,则margin会撑满剩下的空间;如果margin是固定值,width是auto,则width会撑满剩下的空间。这就是流体布局的根本所在。
四、外在盒子和内在盒子
外在盒子是决定元素排列方式的盒子,即决定盒子具有块级特性还是内联特性的盒子。外在盒子负责结构布局。
内在盒子是决定元素内部一些属性是否生效的盒子。内在盒子负责内容显示。
如display:inline-table;外在盒子就是inline,内在盒子就是table。外在盒子决定了元素要像内联元素一样并排在一排显示,内在盒子则决定了元素可以设置宽高、垂直方向的margin等属性。
Web前端入门基础-CSS的基础知识点学习
右侧的table和左侧的文字在一行排列(外在盒子inline的表现特征),同时有拥有自定义宽度111px(内在盒子table可以设置宽高)。
五、css权重和超越!important
曾经有道面试题把我难住了:
//假设下面样式都作用于同一个节点元素`span`,判断下面哪个样式会生效
body#god div.dad span.son{width:200px;}
body#god span#test{width:250px;}
可怜当时做了三年前端的我竟然还不知道css有权重
css选择器权重列表如下:
Web前端入门基础-CSS的基础知识点学习
在css中,!important的权重相当的高,但是由于宽高会被max-width/min-width覆盖,所以!important会失效。
width:100px!important;
min-width:200px;
上面代码计算之后会被引擎解析成:
width:200px;
以上就是小编讲的大致内容了,还有什么相关问题要问的,达内IT教育涵盖基本行业知识,安排的合理,专业师资,小班授课,费用低,学习快,400咨询热线24小时答疑。
尊重原创文章,转载请注明出处与链接:http://www.soxsok.com/wnews126451.html 违者必究! 以上就是关于“南宁口碑好的web前端网课培训有哪些”的全部内容了,想了解更多相关知识请持续关注本站。