首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

一篇文章搞定多列布局--等宽,等高,自适应

两个子级设置display为table-cell,这样他们其实就相当于table的两个单元格。由于我们要固定左边的宽度,父级table应该使用布局优先,即table-layout: fixed;。...,列宽由表格宽度和列宽度设定,而与单元格的内容无关。...这种模式下,浏览器在接收表格第一行后就可以渲染出来,速度更快。 auto: 这是默认值,表示表格内容优先,列的宽度是由列单元格中没有折行的最宽的内容设定的。...table:布局中我们用到了表格的两个特性,一个是通过table-layout来控制是布局优先还是内容优先,如果将其设置为fixed,可以将一列宽度固定,不受内容长度影响。...我们用到的另一个特性是,表格同一列里面的单元格天生就是等高的,我们用这个来做了等高布局。

3.1K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    第3天:CSS浮动、定位、表格、表单总结

    今天学的是浮动、定位、表格、表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意。...下面是主要知识点: 一、float浮动 1、块元素在一行显示 2、内联元素支持宽高 3、默认内容撑开宽度 4、脱离文档流 5、提升层级半层 二、clear清除浮动 1、加高(扩展性不好) 给浮动元素的父级设置同样的高度...2、给父级加浮动(页面中所有元素都要加浮动,margin左右失效) 3、inline-block(margin左右auto失效) 4、空标签加浮动(div )(任何用到的地方都要加) .clearfix...、提升层级 绝对定位(absolute) 1、使元素完全脱离文档流 2、使内嵌支持宽高 3、块属性内容撑开宽度 4、如果有定位父级相对于定位父级发生偏移,没有定位父级相对于document发生偏移 5、...z-index定位层级 默认后者的值高于前者 六、表格(table) thead(表头)、tbody(表格主体)、tr(表格行)、th(元素定义表头)、td(元素定义表格单元) 表格样式重置 table

    1.6K40

    元素居中的多种实现方式!

    :center;}.imgCenter{text-align:center;}div class="txtCenter">我想要在父容器中水平居中显示。...div> 不定宽块状元素 table + margin table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素... class="parent">     div class="child">DEMOdiv>div> inline-block + text-align 初始DEMO是块级元素,会充满父元素...(height:该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。 缺点:当文字内容的长度大于块的宽时,就有内容脱离了块。...display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。

    97620

    网页设计基础知识汇总——超链接

    =""> —— 设置边框昏暗部分的颜色(当border的只大于等于1才有用) —— 设置表格的单元格之间的空间大小 表格单元格内的内容自动换 表格中的空单元格: 在一些浏览器中,没有内容的表格单元显示得不太好。...如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。...跨越多行:在或标签符里利用rowspan属性,并在其后写上想要跨越的列数。 div标签: div> 可定义文档中的分区或节(division/section)。...div标签作用:W3C 在其最新的 XHTML2 草案的 XHTML 结构模型中这样定义 div: div 元素,通过与 id 、 class 及 role 属性配合,提供向文档添加额外结构的通用机制

    3.5K30

    两个Excel表格核对 excel表格中# DIV0 核对两个表格的差异,合并运算VS高级筛选

    两个Excel表格核对   excel表格中# DIV/0 核对两个表格的差异,合并运算VS高级筛选 1.两列顺序一样的数据核对 方法1:加一个辅助列,=B2=C2 结果为FALSE的就是不相同的...excel表格中# DIV/0 含义: 当公式被 0(零)除,即分母为0时,将会产生错误值#DIV/O 2种方法快速核对两个表格的差异,合并运算VS高级筛选 (测试发现:对数字列有效果,对文本的没有效果...点击确定,在新的工作表里生成了一张新的表格,在这个表格里,数字为0表示无差异,大于0的,则表示差异,而显示成“#DIV/O!”则表示这个编号只在其中一个表格里。...对比的两个表格,表头,在使用标准偏差功能时候,字段名称需要一致。否则会出现:多出来一列:全部是#DIV/0! Excel是根据表头名称一致来匹配的。...列表区域,选择其中的一个库存表 条件区域,选择另外一个库存表 点击确定后,当前表格隐藏了部分数据,选择所有可见的单元格,点击菜单栏上“开始-字体-填充颜色”,弹出颜色列表,选择一个填充色。

    11010

    java学习与应用(4.1)--HTML、CSS

    表格:只有行的概念。...table定义表格(border线宽,width宽度,cellpadding边沿内容间空白,cellspacing单元格间空白,bgcolor背景色,alien对齐),tr定义行(颜色,对其方式),td...表单标签 表单标签:form标签定义表单(action提交地址,method提交方式[7种,get请求参数在地址栏显示,请求参数长度有限制,安全低 post请求参数封装到请求体中,请求参数无限制,安全高...选择器:基础选择器:id选择器(#id属性值{},优先级高于元素选择器),元素选择器(标签名{}),类选择器(.名称{},使用标签的class属性调用,高于元素选择器,低于id选择器)。...拓展选择器:*表示选择所有元素,并集选择器(选择器1,选择器2{}),子选择器(选择器1 选择器2{}选择元素1下的元素2),父选择器(父标签 > 子标签{},作用于父标签) 属性选择器(元素名[属性名

    2K20

    html 怎么让整体居中,html中表格整体居中 详解html里面如何让表格居中

    然后在上方的style标签中加入css样式,设置table标签的样式,table的元素具有长度自适应性,其长度根据其内文本长度决定,只要设置margin属性。...表格整体居中,表格外加一个div style=”margin:0 auto” 表格的单元格显示居中 或者设置爱一个人没有回应,与其乞讨爱情,不如骄傲地走开。...就是两个表格排在一起,让后两个表格刚这位网友欢迎来到四十五资源网,你可以将两个表格分别设置为左浮动,然后用一个大的div将两个表格包起来,设置大div左右margin为auto即可。...左右居中:margin:0 auto; 上下居中: 1.设置父级div高度(假设为300px); 2.设置table的高度(假设为100px); 3.设置margin-top为:300px/2 – 100px...这两个属性综合使用,就可以让单元格的内容上下左右都居中显示。

    5.6K40

    HTMLCSS基础知识学习笔记

    ,如栏目版块     div id="版块名称">…div>  div 带上ID号,使之更清晰     表格内容      创建表格                若加此标签后,表格会一次性显示出来(而非网页加载一点显示一点)         表格一行        表格中的一行         表格单元格...      表格中的一个单元格         表格表头        表格头部的一个单元格,表格表头     表格摘要">......如 三年级 10.CSS 子选择器     还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素...3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

    2.1K10

    【CSS】布局属性:display

    display 试一试 display:block; 块级元素(block):独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽。...display:inherit; 跟随父元素的display样式;父元素block它就block,父元素inline它就inline .inline {display: inline} .inherit...子元素不是inherit元素div> div> div元素默认是换行的,因为父元素是inline,设置了inherit的子元素跟随父元素的属性inline,与父元素成为同一行。...,已经从 CSS2.1 中删除 marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除 table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符...table-cell 此元素会作为一个表格单元格显示(类似 和 ) table-caption 此元素会作为一个表格标题显示(类似 ) 示例汇总:试一试 <html

    1.5K20

    【Web前端】深入CSS 布局

    CSS 页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。...正常流分为两种主要类型: 块级元素:默认情况下,块级元素会独占一行,并且从上到下排列。常见的块级元素有​​div>​​、​​​​、​​​​、​​​​等。... div> 两个段落​​​​都是块级元素,它们会按照正常流的规则垂直排列。而且,即使你在​​​​​标签之间加入了许多空格,段落依然会在页面中按照垂直方向排列。...五、浮动(Float) 浮动是CSS中的一个经典布局方法,用于将元素从正常流中移出,并使其在父容器内左右浮动。... div> 在这个例子中,图片浮动到左侧,文本则环绕在图片右侧。 需要注意的是,浮动元素之后的内容通常会出现“塌陷”问题,即元素的父容器高度会变为0。

    10510

    css display table-cell

    table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。 inline-table 此元素会作为内联表格来显示(类似 ),表格前后没有换行符。...table-column 此元素会作为一个单元格列显示(类似 ) table-cell 此元素会作为一个表格单元格显示(类似 和 ) table-caption 此元素会作为一个表格标题显示...到这里可能会有朋友提出这样的疑问:在众多的实际应用中并没有完整的定义类似表格这样的层次关系,而是往往只有display:table-cell,这是因为,如果一个对象具有display:table-cell...class="parent"> div class="children">蚂蚁部落div> div> 以上代码中,父元素中具有display:table-cell,但是它并没有父元素或者祖父元素定义...在兼容各个浏览器的位置高度div垂直居中效果中,middle对象中使用了display:table-cell,它的父对象parent中也显示声明了display:table-cell,否则会匿名创建两个具有此属性的对象

    1.4K10

    全栈之前端 | 10.CSS3基础知识之表单表格学习

    value="Reset"> div> label {font-weight: bold;} /* 使用 body 中或者一个父元素中定义的字体 */ button...,允许浏览器更快的对表格进行布局;这是因为固定表格仅取决于表格宽度、列宽度、表格边框宽带,以及单元格间距,而与单元格的内容无关;在浏览器渲染时在接收到表格第一行后便可显示表格,而后者需要根据内容计算来显示表格所以加载时会稍慢...,但请注意其不能用于块级元素的垂直对齐。...* :使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。 * :使元素的基线对齐到父元素的基线之上的给定百分比。...empty-cells - 是否显示空内容的单元格 描述: 此属性定义浏览器怎么来渲染显示 中没有可见内容的单元格的边框和背景。

    22610

    Android开发人员初识前端

    7.4、td表示表格的一个单元格,一行中包含几对td标签,说明一行中就有几列。 7.5、th表示表格的头部,表格表头 7.6、表格中列的个数,取决于一行中数据单元格的个数。...,元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。...、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。...1#div{ 2 position:fixed; 3 left:0; 4 top:0; 5} 6、长度和颜色 6.1、颜色值 关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时...但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。

    2.3K30

    day012:什么是BFC?什么条件下会触发?渲染规则?应用场景有哪些?

    W3C对BFC的定义如下: 浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为"visiable..."的块级盒子,都会为他们的内容创建新的BFC(Block Fromatting Context, 即块级格式上下文)。...为 absolute 或 fixed) 行内块元素(元素的 display 为 inline-block) 表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)...表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值) 匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group...防止浮动导致父元素高度塌陷 现有如下页面代码: <!

    96410

    【HTMLCSS篇】牛客题库练习

    标签定义表格的标题。...然而,CSS 属性 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置 合并单元格 横向 合并单元格在td标签中使用colspan属性,属性值为需要合并单元格的个数...,同时将被合并的单元格td删除 纵向 合并单元格在td标签中使用rowspan属性,属性值为需要合并单元格的个数,同时将被合并的单元格td删除 1.3 FED3-图像标签属性 ⭐方法1 div> 注意 em是相对于自身字体大小的单位 2.12 FED19-CSS单位(二) ⭐方法1 注意 在css中单位长度用的最多的是...em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。 对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素。 3. WebAPI

    1.1K40
    领券