让块元素在同一行显示的方法： float 和inline-block

【让块元素在同一行显示的方法： float 和inline-block】的更多相关文章

让块元素在同一行显示的方法： float 和inline-block

float: 定义:按照一个指定的方向移动,遇到父级的边界或者相邻的浮动元素就会停下来(不完全脱离文档流) 值: left.right.none 特点: 1.浮动的块元素可以在一行显示,宽度是被内容撑开的2.浮动的行内元素支持宽高3.非浮动元素里的内容会留出前面浮动元素的位置(盒模型的位置)4.浮动的子元素不会撑开其父元素的高度,所以换行.空格也不会影响父元素(要撑开父元素的话需要在父元素最后增加一个清楚左右浮动的子元素clear: both; after伪类清除浮动) .clearfix:af…

css布局------块元素水平垂直居中的四种方法

HTML <div class="parent answer-1"> <div></div></div> CSS .parent { width: 800px; height: 800px; border: 1px solid red;}.parent div { width: 200px; height: 200px; border: 1px solid red;} /*方法1:dispaly:table-cell*/.answer-1…

web - 块元素和内嵌元素的特征

块: 1.独占一行 2.支持所有的样式 3.不设置宽度的时候,宽度撑满整行常用的快标签有: div,section,header,nav,footer,article,aside,ul,ol,li,dl,dt,dd,h1~h6,p, 内嵌: 1.多个内嵌元素可以在一行显示 2.不支持宽高,对上下的margin 3.宽度由内容撑开 4.代码换行会被解析常用内嵌标签有 : span,strong, a , em inline-block : 1.多个设置为inline-block的块元素可以在一…

块元素block，内联元素inline; inline-block;

block:块元素的特征 div ol li 等: 1.只有高度不设置宽度的时候默认撑满一行: 2.默认块元素不在一行: 3.支持所以CSS命令: inline:内联元素的特征 span i strong 等: 1.宽高由内容撑开: 2.不支持宽高: 3.一行上显示同类的内联元素: 4.不支持上下的margin; 5.元素换行可以被解析: inline-block: 元素特征 1.块元素在一行内显示; 2.行内元素支持宽高; 3.没有宽度的时候内容撑开宽度;…

CSS.02 -- 样式表及标签分类（块、行、行内块元素）、CSS三大特性、背景属性

样式表书写位置内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head> 外链式写法写在head里,<link rel="stylesheet" href = "1.css"> 行内样式表/内联式 <h1 style = "font - size : 30px ; color : red;">…

关于IE 浏览器的position居中定位的问题和行块元素的设置问题

这两天在写页面时,遇到一些IE浏览器显示不正常的问题,主要有两个: 1. 在td 中设置span 元素水平垂直居中,在谷歌浏览器中可以正常显示,但是在IE 中却无法显示出想要的结果,即不能实现垂直水平居中 2.将元素设置成行块元素时,老是显示不对齐,也不能显示想要的效果 3.第一个问题的css 设置如下: table.shanye tbody tr td.td1 { position: relative; } table.shanye tbody tr td.td1>span { positio…