快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

真正零基础学习HTML(五)-创新互联

盒子高度=内容高度+填充+边框+外边距

创新互联建站基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽,联通大带宽,移动大带宽,多线BGP大带宽租用,是为众多客户提供专业成都多线服务器托管报价,主机托管价格性价比高,为金融证券行业服务器托管,ai人工智能服务器托管提供bgp线路100M独享,G口带宽及机柜租用的专业成都idc公司。

一、浮动
1、float:
左浮动 left
右浮动 right
2、标准流
3、脱离标准流:设置浮动就脱离标准流
4、谁浮动谁下面的元素占据自己的位置
5、左浮动
(1)浮动了两个div元素div2和div3
div2--->>行内块元素没有独占一行
div3--->>紧跟在div2的右边
div4--->>紧跟在div1的下面
浮动了三个div2,div3,div4
div3、div4依次跟在上一个元素右边
(2)如果div3元素上一个元素也是浮动的,那么div3元素会跟随在上一个元素(div2)的后边(如果一行放不下这两个元素,那么div3元素会被挤到下一行);
如果div2元素上一个元素是标准流中的元素,那么div2的相对垂直位置不会改变,也就是说div2的顶部总是和上一个元素的底部对齐。
6、右浮动
向右边浮动,两个相邻浮动跟在前一个左边

7、如果我浮动,下一个元素占据我的位置我的位置在哪里?

(1)看上一个是标准就跟在下面
(2)看上一个浮动方向一致就跟在后面
(3)看上一个浮动方向不一致就找一致或者标准,然后遵循(1)(2)的规则

就像会飞的×××,如果我没有飞,前面的×××在左侧飞起来我就在他下面跑,如果前面的×××在右侧飞,那我不受影响我就继续向前跑,看前面的左侧飞我就在他下面,看他地上跑我就跟在他后面。
如果我在左侧飞,前面×××也在左侧飞,那么空中车道已经满了,我只能跟他并肩飞并且在他右边。
如果我在右侧飞,前面×××也在右侧飞,那么空中车道已经满了,我只能跟他并肩飞并且在他左边。

8、总结:
(1)粗略定位
float:left 左
float:right 右
(2)精准定位(向上找)
假设我是左浮动
上一个元素无浮动:底部对齐
上一个元素左浮动:紧跟其“后”
上一个元素右浮动:前进一步,看上一个元素的上一个元素

9、块级元素:独占一行,可以设置宽和高 此元素前后会带有换行符(block)
内联元素:设置宽和高没有作用 inline
行内块:可以设置宽和高 inline-block
span设置浮动后高度宽度变的有意义
二、定位
position:relation;
默认:span
1、相对定位:relation
相对自己来说
top:垂直偏移量
left:水平偏移量
span运用这个属性依然无效
2、绝对定位:position:absolute;
(1)如果前面的父(祖)都没有设置relation或者absolute属性,top和left相对于body
(2)如果前面的父(祖)都设置relation或者absolute属性,则按照父(祖)元素定位

3、固定定位:position:fixed;
三.补充属性
1、z-index
z-index只能在position属性值为relative或absolute或fixed的元素上有效,如两者发生重叠时,z-index的值越大,位置越往上
2、Display
块级元素:独占一行、可以设置宽和高。此元素前后会带有换行符。block
内联元素:设置宽和高没有作用 inline
行内块:没有独占一行、可以设置宽和高 inline-block
区别:行内块取其块级元素的长处,补其内联元素的短处
3、Overflow
visible 默认值。内容不会被修剪,会呈现在元素框之外
hidden 内容会被修剪,并且其余内容是不可见的
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容(默认有滚动框)
Auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容(溢出才有滚动条)
4、Visibility
visible 默认值,元素是可见的
hidden 元素是不可见的
5、Visibility与Display:
Visibility:hidden;隐藏元素,但其位置空出,新元素不可覆盖其旧元素位置
Display:none;元素消失,新元素覆盖其旧元素位置

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章标题:真正零基础学习HTML(五)-创新互联
转载源于:http://6mz.cn/article/geohe.html

其他资讯