CSS中display对布局的影响以及元素display的默认值

比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level):而span元素的默认display属性值为“inline”,称为“行内”元素.…

CSS中常见的布局

一.css中常见的布局有哪些? (1)两列布局 (2)三列布局 (3)弹性布局 (4)圣杯布局 (5)双飞翼布局二.具体实现 (1)两列布局 https://www.cnblogs.com/qing-5/p/11442906.html (2)三列布局 https://www.cnblogs.com/qing-5/p/11338819.html (3)圣杯布局和双飞翼布局相同点: a.三列布局,中间宽度自适应,两边定宽: b.中间栏要在浏览器中优先展示渲染: c.允许任意列的高度最高: d.…

UC浏览器中，设置了position: fixed 的元素会遮挡z-index值更高的同辈元素

"UC浏览器中,设置了position: fixed 的元素会遮挡z-index值更高的同辈元素(非fixed)." 我们使用的artDialog弹窗中,在UC浏览器中,如果页面高度大于一屏时,蒙版(fixed定位)会遮盖住弹窗(absolute),并且滚动页面的时候弹窗也会跟着页面滚动. 所以,现在打算把artDialog中的弹窗改为fixed定位测试环境:UC浏览器 V11.7 在8.6的版本,这个情况直接出现.在8.7之后的版本,当同辈元素的height大于713这个「神奇」的…

css 中的grid布局基础

CSS Grid Layout为CSS引入了一个二维网格系统.网格可用于布局主要页面区域或小型用户界面元素. 网格是一组交叉的水平和垂直线 - 一组定义列,其他行.元素可以放在网格上,以行或者列为标准. grid布局的优点: 1:固定和灵活的轨道尺寸 2:可以使用行号,名称或通过定位网格区域将项目放置在网格上的精确位置.网格还包含一种算法,用于控制未在网格上显示位置的项目的放置. 3:在需要时添加其他行和列 4:网格包含对齐功能,以便我们可以控制项目放置到网格区域后的对齐方式,以及整个网格的对齐…

CSS中定位和浮动对行内元素的宽高的影响

行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者position:fixed或者使用float属性时,width和height的设置能起作用. 因为在以上三种情况下,行内元素的display从inline变为block <style> span{ background-color:red; width:100px; height:100px; float…

css中的那些布局

因为最近心血来潮,就总结了一下css中的几种常见的多列布局. 两列自适应布局两列自适应布局算是css布局里面最基础的一种布局了,不少网站在使用. 这种布局通常是左侧固定,右边自适应,当然也有反过来的,道理一样,这里有好几种方法. (张鑫旭老师的博客是左边流式布局,右边固定宽度) 左浮动+margin 因为浮动会导致元素脱离文档流,所以下面的元素会占据浮动元素原来的位置. 这个时候只要对右边元素设置margin-left:左边div宽度就可以实现自适应布局. 代码:左浮动实现两列布局绝对定位…

使用css中的flex布局弹性手风琴效果

不多说,直接上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹性布局</title> <style> *{margin: 0;padding: 0;list-style: none;text-decoration: none;} .box{flex-direction: row;}…

图文详解前端CSS中的Grid布局，你真的可以5分钟掌握

前言网站的布局是一个网站设计的根本,CSS的Grid布局已经成为了未来网站布局的基本方式. 今天这篇文章我们通过图文,一起看看如何自己实现Grid布局方式. CSS 第一个Grid布局首先我们看看最基本的Grid布局是什么样的,HTML页面的代码如下所示. HTML代码然后设置其CSS属性,这里主要展示容器的CSS属性,给子元素添加的color属性就不在这里展示了. CSS属性在页面上看到的效果如下,目前因为没有对子div元素做任何设置,会自动将子div沿垂直方向排列. 页面效果设置行…

CSS中的flex布局

1.flex 布局的概念 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为 Flex 布局,行内元素也可以通过 inline-flex 使属性值用 Flex 布局. inline-flex 和 inline-block 一样,对设置了该属性值的元素的子元素来说是个 display:flex 的容器,对外部元素来说是个 inline 的块. .box{ display: flex; } .inlinebox{ displ…

CSS 设置背景透明度，不影响子元素

由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素．解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 */ background: rgba(0, 0, 0, 0.6); } 2> 使用 opacity, 设置一个背景DIV,此DIV使用绝对布局 Example <div class="demo"> <div class="demo-bg"&g…

[小问题笔记（八）] 常用SQL（读字段名，改字段名，打印影响行数，添加默认值，查找存储过程等）

读取所有字段,自然排序 declare @fields varchar(max) Select @fields=ISNULL(@fields,'')++name+',' from syscolumns Where ID=OBJECT_ID('contact') order by colorder print @fields 读取所有字段,名称排序 declare @fields varchar(max) Select @fields=ISNULL(@fields,'')++name+',' fr…

oracle中查询结果集为空，则得到一个默认值

有同事问我上述问题,我把我的实现思路写出来.子查询把查询的结果和默认的结果全部显示.父查询通过伪列rownum来筛选,如果查询有结果,就有几条就显示几条,而不去显示子查询中的默认值:如果查询没有结果,那就把默认值显示出来举例: select * from (select table_name from user_tables where rownum < 3union allselect 'default' from dual ) where rownum <= (select case (…

css 中 stick footer 布局实现

做项目中,我们在写弹框的时候,不管弹框的内容多或者少,可能需要一些内容需要固定在框底部,比如关闭按钮.stick footer 就是让 footer 元素固定在底部当内容不足满屏时,footer 紧贴最底部满屏需要下拉时,footer 就在内容的底部以下主要用一种固定的结构实现 stick footer , 俗称套路, 看以下html结构: <div id="wrap"> <div id="main" class="clearfix…

css中的圣杯布局和双飞翼布局

圣杯布局布局要求: 三列布局,中间自适应,两边定宽中间栏要在浏览器优先渲染允许任意列的高度最高用最简单的CSS.最少的HACK语句解释说明: 1.min-width:700px是为了当页面缩小到指定的700px的时候,页面内容宽度不再随着浏览器缩小.是为了电脑的正常浏览效果 2.注意到container设置的值0 220px 0 200px,上右下左,所以left 设置widh:200px,right设置width:220px 3.设置min-height:300px,是让三列…

CSS中的圣杯布局与双飞翼布局

一,圣杯布局 1,什么是圣杯布局? 所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局 2,构建圣杯布局的步骤: 2.1,添加一个容器,在这个容器中添加放三个盒子(左.中.右): 2.2,设置两侧盒子(左.右)的宽度 ,使其宽度固定: 2.3,设置中间盒子的宽度为100%,这是中间盒子宽度自适应的关键: 2.4,设置容器的padding-left和padding-right属性,属性值分别为左盒子的宽度和右盒子的宽度: 2.5,让三个盒子都向左浮动,向右浮动可能会出现问题,所以都…

css float对于之后布局的影响

后面的元素不浮动,即便设置了宽度,表面上只占了一定的宽度,但实际上占了全屏.(所以设置了overflow之后,并且之后的div设置了宽度,再设置margin-left可能不起作用). 高度对浮动的影响如果要实现类似九宫格那种效果,则他们的高度必须保持一致,否则会占用下一格的位置.…

css中响应式布局中样式的代码书写方法

代码示例:@media only screen and (min-width: 320px){ html { font-size: 8px !important; } .mulu-zi{ position: absolute; top: 18px !important; left: 18%; color: #000000; } } @media only screen and (min-width: 375px){ html { font-size: 10px !important; } .mu…

css中的块级和内联元素

块级元素: 首先说明display是块级元素,会单独站一行,如代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>display元素</title> <style type="text/css"> .box1{ height: 50px; width: 300px;…

CSS中的伪类和为伪元素

伪类: 伪元素:…

css中的zoom的使用

css中的zoom的使用 zoom : normal | number normal : 默认值.使用对象的实际尺寸 number : 百分数 | 无符号浮点实数.浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数,可以是数值,也可以是百分比.如:zoom:1,zoom:120%. ps:网上都说是ie的专有属性,本人亲测chrome下也可以使用:(Firefox浏览器不支持) 实例一: .first-div{ width…

认识CSS中布局之文档流、浮动、定位以及叠放次序

前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流普通流又被称为文档流或者标准流,普通流是指网页内标签元素正常情况下会按照自上而下,自左向右按顺序排列.即块级元素独占一行,多个块级元素存在会自上而下顺序排列,多个行内元素会共占一行,自左向右排列. <!DOCTYPE html> <html> <head> <meta c…

谈谈CSS中一些比较"偏门"的小知识

前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象:同时也希望有需要的人能有收获! 1.常见的浏览器内核: 以IE为代表:IE,MaxThon,TT,the World,360,搜狗浏览器等-----Trident内核[又称MSHTML] Firefox,Netscape 6及以上版本,seaMonkey等-----Gecko内核 Opera7及以上----- Opera内核原为:Presto,现为:Blink; Webkit…

（5）《Head First HTML与CSS》学习笔记---布局与定位

层叠与CSS的权重判断 1.要理解层叠,除了前面的内容外还差最后一个知识点.你已经知道如何使用多个样式表来更好地组织你的样式,或者支持不同类型的设备.不过实际上用户访问你的页面时还有另外一些样式表. 2.我们来复习一下. 浏览器确定要对一个元素应用哪个样式时,优先级是作者样式 > 读者样式(个别浏览器允许读者自己设置样式:如果读者在一个属性声明最后加上!important就能覆盖作者样式) > 浏览器默认样式实际上,这就是在问“层叠”的作用,只是问法不同. 给定一组样式表…

css中对position的几种定位方式的最佳诠释

关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.relative. ◆position:static 无定位该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用pos…

css中元素定位

在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.relative. position:static无定位该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用position:static取消继承,即还原元素定位的默认值. position:absolute绝对…

CSS中Position属性static、absolute、fixed、relative

在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.relative. ◆position:static 无定位元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. 该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影…

CSS中vertical-align的默认值baseline的理解

写在前面的话在学校业余学习了一个月的CSS,人生中第一篇博客就献给CSS了,欢迎大家指正文章中不正确的地方,在此感谢.在尝试开始写博客的时候查了好多资料,原本以为写自己熟悉的知识的博客很容易,没想到中间还是遇到很多的不懂的地方,写博客真是个好习惯,可以帮自己总结知识,找出自己的知识盲区,只不过太花时间了.国庆都出去玩了,然而我宅了好多天. veritical-align的作用,对象以及范围作用veritical是垂直的意思,而align是对齐的意思,两个合起来就是在垂直方向进行对齐. 对象v…

CSS中z-index全解析

一.z-index解释 z-index属性决定了一个HTML元素的层叠级别,元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的z-index值意味着这个元素在叠层顺序中会更靠近顶部.这个层叠顺序沿着垂直的线轴被呈现. 在一个HTML页面中,自然的层叠顺序(也就是元素在Z轴上的顺序)是由很多因素决定的: 具有负值的stacking contexts(层叠环境)元素,按照出现的先后顺序排列(越靠后层级越靠上); 没有被定位,没有浮动的块级元素,按照出现的先后顺序排列; 没有被…

display: inline-block 布局

三个元素display: inline-block; 布局 ,其中一个元素中存在其他元素也用了display: inline-block; 无法垂直居中,将这个元素设置为display: inline;…

css中“~”和“>”是什么意思？

css中"~"是: 为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景: p~ul{ background:#ff0000; } <p>快乐生活</p> <ul> <li>生活</li> <li>生活</li> <li>生活</li> </ul> p~ul 选择前面有 <p> 元素的每个 <ul> 元素. 定义和用法…

【CSS中display对布局的影响以及元素display的默认值】的更多相关文章