元素在页面上的排列，从我们的角度看是二维的，元素的位置可以用x，y轴坐标来表示。但是，元素和元素之间的位置如果有所重叠，谁显示在前面，就涉及到另一个轴：z轴。...将B的宽度改为150px的话就会掉下来，但是这种方式与使用 clear 特性清除浮动不同。 适用于哪些元素 可设置给任意元素，但只适用于生成非绝对定位框的元素。对于绝对定位的元素，浮动没有任何效果。...这也体现了浮动和绝对定位之间的一种平衡。 值的含义 该属性指定框应当向左右移动或者不移动。特性值有如下含义： left 该元素产生一个向左浮动的块框。...内容在该框的右边排列，就是上一篇帖子中所说的文字环绕，起点是框的顶部（会受’clear’属性的影响）。 right 与left类似，框向右侧浮动，内容在该框的左侧排列，从顶部开始。...左浮动框的右外边不可以出现在它右侧的任何右浮动框的左外边之右。对于向右浮动的元素也有类似的规则。 注意，以上说的是右侧，不是下侧，此规则不包括左浮动框下面的右浮动框。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。...垂直方向同理，以至于后续属性当中只要是涉及到reverse则是会先将其内容倒置，这种方式是为了方便一些国家阅读方式是从右向左的方式，比如中国的古文。...假设N个项目的字体大小不同，那么字体所占用的空间也不一样，该属性会令N个项目的第一行文字顶部对齐 stretch（默认值） 如果项目未设置高度或设为auto，将占满整个容器的高度。...flex-end 交叉轴居底对齐 space-between 与交叉轴两端对齐，轴线之间的间隔平均分布 space-around 每根轴线两侧的间隔都相等。...="box-child" style="order:0">4div> div> 如上方式，显示的顺序将变为4132 2.flex-grow属性 该属性定义项目的放大比例，默认为0，即如果存在剩余空间
颜色是通过CSS最经常的指定： 十六进制值 – 如: ＃FF0000 一个RGB值 – 如: RGB(255,0,0) 颜色的名称 – 如: red 文字属性 文字对齐 text-align 属性规定元素中的文本的水平对齐方式...css盒子模型 margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。...： 提供一个，用于四边； 提供两个，第一个用于上－下，第二个用于左－右； 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下； 提供四个参数值，将按上－右－下－左的顺序作用于四边； 浮动(float...对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。...absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。
">div>div>图片3.1 优化上面的 float + margin (复杂不推荐)可以为右列自适应元素增加父级容器 right-fix，解决上面的浮动与不浮动元素混用可能存在的兼容问题，和右列存在...图片3.3 float + overflow左列同样使用 float，右侧不用 margin-left，而用 overflow: hidden; 开启 BFC 模式，将元素内部环境与外界完全隔离。...，如下图所示：#left { /* 从当前行上移一行 */ margin-left: -100%;}图片此时只能借助 position 定位来将 left 继续向左移动自身宽度#left { position...parent-fix 相同，在 #parent 设置了 margin-left 后，整体 #parent 向左便宜，导致右侧行尾多出一个间距的空白，所以要设置 #parent 宽度为 #parent-fix...不推荐，因为计算麻烦，如在css中：width、height 属性的百分比值依赖父标签的数据；padding、margin 设置百分比值，无论垂直还是水平方向，都相对于父元素的 width，与父元素的
它只能设置某个元素在父元素内左对齐或者右对齐。设置了浮动的元素，将脱离标准流，之后它将无视元素的display属性，并且都被当做块级元素处理。...div{ float:left;/*规定元素向左浮动*/ /*float:right;规定元素向右浮动*/ } 请注意，浮动float属性没有center取值，并且，如果设置了浮动属性，那么你将不能通过使用...b) relative 相对定位，元素保留在标准流中所占用的位置，但实际是边框及以内的部分将显示在偏移之后的位置。即虽然元素已经不再原来的位置了，但之前所占用的空间并不会被释放给其他标准流中的元素。...弹性盒子中默认有两根轴线，水平方向的主轴，垂直方向的纵轴（交叉轴）。轴线与盒子边框的交点是开始位置和结束位置。 ?...flex-start，默认值，开始对齐（例如上面设置了横向从左至右排列项目，则这里表示左对齐，如果上面设置row-reverse，则这里表示右对齐），该属性还有几个可选值：flex-end，结束对齐；center
清除浮动的方法 额外标签法,在最后一个浮动元素后面添加一个空的标签代码: div style="clear: both">div> 使用after伪元素进行清除浮动. .clearfix:after...>div> 达叔小生 使用dispaly: none后隐藏对象,不保留位置. visibility visibility: inherit |...效果 选择器{float:属性值;} 属性值 描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动 清除浮动本质 ?...效果 选择器{clear:属性值;} clear 清除 属性值 描述 left 清除左侧浮动的影响 right 清除右侧浮动的影响 both 同时清除左右两侧浮动的影响 额外标签法 clear:...90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通 简书博客： 达叔小生 https://www.jianshu.com/u/c785ece603d1 结语 下面我将继续对 其他知识
以下为您详细介绍常见的 display 属性值： 1.2.1 块级元素：block block 将元素显示为块级元素，使其具有块级元素的特性，如独占一行、可以设置宽度和高度等属性。...float 属性的引入使得元素可以脱离文档流，向左或向右浮动，直到它的外边缘碰到包含块或者另一个浮动元素的边框为止。这为多列布局和图文混排等复杂布局提供了可能。...以下是float属性常见取值及作用： 2.1 左浮动：left float: left 会使元素向左浮动，脱离正常的文档流，直到其外边缘碰到包含块或另一个浮动元素的边框为止。 示例2-1： 运行结果： 2.2 右浮动：right float: right 与 float: left 相反，它会使元素向右浮动，直到其右边框碰到包含块的右边框或者另一个浮动元素的左边框...在需要改变常规阅读顺序或突出右侧元素时使用，比如在从右向左阅读语言的网页设计中，或者希望右侧元素优先被用户注意到的场景。 示例4-2： <!
-- set the div for links -->导航栏，弯曲和位置固定显示屏设置为弯曲。...使用position属性的固定值固定位置：nav { display: flex; position: fixed; top:0; width: 100%; background-color...>为正确的链接设置 div以下菜单链接位于网页的右侧：div class="right-links"> Contact Us More Infodiv>链接与 Flex 向左对齐使用 flex 属性，将 Home、Login 和 Register 链接设置在左侧。...左侧柔性项的初始长度设置为 200px：.left-links{ flex:1 1 200px;}以下是创建具有左对齐和右对齐链接的导航栏的代码： <!
格式： 选择器 { float: 属性值 ; } 常用属性值： none ：元素不浮动（默认值） left ：元素向左浮动 right ：元素向右浮动 下面我们使用多个课堂案例...3.3 浮动案例 3.3.1 准备代码 3.3.2 案例 1：左对齐顺序排列 示例 1：要求在一行上，左对齐： 注意：因为从上到下执行代码，红色方块是第一个向左浮动的，自然在最左边 3.3.3 ...： 注意：因为从上到下执行代码，绿色方块是第一个向右浮动的，自然在最右边 3.3.5 课堂练习：两端对齐排列 准备代码： 要求的效果： 提示： 左浮动：先红后蓝 右浮动：先绿后黄...： 1 、标准流作父元素，用于排列垂直位置 2 、浮动元素在标准流父元素内，用于排列水平位置 4. ...格式： clear : 属性值 ; 准备代码： 默认效果： 常见属性值：（为绿色块设置清除浮动） 注意：clear 不会清除元素自身的浮动状态，仅会清除该元素左侧或右侧的浮动效果
flex-direction: row | row-reverse | column | column-reverse row(默认值)：在“ltr”排版方式下从左向右排列；在“rtl”排版方式下从右向左排列...row-reverse：与row排列方向相反，在“ltr”排版方式下从右向左排列；在“rtl”排版方式下从左向右排列。...其中“ltr”所指文本书写方式是“left-to-right”也就是从左向右书写； 而“rtl”所指的刚好与“ltr”方式相反，其书写方式是“right-to-left”，也就是从右向左书写 那不如来个例子...wrap：伸缩容器多行显示，“ltr”排版下，伸缩项目从左到右排列；“rtl”排版上伸缩项目从右向左排列。...wrap-reverse：伸缩容器多行显示，“ltr”排版下，伸缩项目从右向左排列；“rtl”排版下，伸缩项目从左到右排列。
在显示网页内容时，元素按照从左至右、自上而下的顺序动态分布，如需改变它在网页中的位置，只能通过修改网页结构中元素排列的先后顺序和分布位置来实现。...position:relative; 时，元素也将遵循流动模型的规则；随HTML文档流从左至右、自上而下流动。...">右列div> div> 图3.1.16 单行两列 （1） 浮动布局实现 设置固定宽度，左列浮于容器的左侧，右列浮于容器右侧，其CSS布局代码如下。...下部的两个链接区域形式相同，左侧被设置为图片链接，右侧为文章列表元素。将左侧的图片与文字链接看作一个段落，用 p标签表示，右侧文章列表使用ul+ li无序列表。 其页面设计步骤如下： 1....浮动框架页面在浏览器中的对齐方式，可以为左对齐、右对齐或居中对齐 name 设定框架页面的名称 marginwidth 设置页面与边框的水平间距 marginheight 设置页面与边框的垂直间距 scrolling
2、文字属性 2.1 文字对齐 text-align 属性规定元素中的文本的水平对齐方式。...4、CSS盒子模型 margin：用于控制元素与之元素之间的距离；margin的最基本用途就是控制周围空间的间隔，从视觉角度上达到相互隔开的目的。 padding：用于控制内容与之边框的距离。...： 提供一个，用于四边； 提供两个，第一个用于上-下，第二个用于左-右； 如果提供三个，第一个用于上，第二个用于左-右，第三个用于下； 提供四个参数值，将按上-右-下-左的顺序作用于四边。...对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。...6.3 absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有以定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。
总结浮动常见的规则内容 元素一旦浮动后, 脱离标准流 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止 定位元素会层叠在浮动元素上面 如果元素是向左（右）...浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界 浮动元素之间不能层叠 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮） 如果水平方向剩余的空间不够显示浮动元素...start 对齐 flex-end:与 main end 对齐 center:居中对齐 space-between: ✓ flex items 之间的距离相等 ✓ 与 main start、main...center:居中对齐 baseline:与基准线对齐 align-content align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content...类似 stretch(默认值):与 align-items 的 stretch 类似 flex-start:与 cross start 对齐 flex-end:与 cross end 对齐 center
+cont结构 三、类似九宫格布局的两列结构 四、图文两列布局 1、左图右文字非垂直居中， 2、左图，右固定行数的文字，右侧文字和左边图片垂直居中。 ...一、大结构上的导航栏和内容区域两栏布局 首先我们从 大结构上 说起，因为我发现很多网站从整个首屏的大结构上都是这种两栏布局： 旁边是侧边栏导航，中间是大块内容区域。...特别说明： mainCont父元素margin-left: -22em; 子元素margin-left：22em;到底咋实现的？ mainCont父元素向左偏移，把右侧nav的位置留了出来。...上边h2通栏因为内容在左侧，所以直接设置了100%宽度（也就是没设置宽度） h2右侧的内容，利用浮动会形成文字环绕效果。让该内容直接右浮动就自动绕开了nav的空间。...2、左图，右固定行数的文字，右侧文字和左边图片垂直居中。这种实现方式就有限了。 ? 同上，左图右多行文字垂直居中，（截图这里限制了两行）但实际开发中，我遇到过有的设计稿不限制行数还要有垂直居中的。
在显示网页内容时，元素按照从左至右、自上而下的顺序动态分布，如需改变它在网页中的位置，只能通过修改网页结构中元素排列的先后顺序和分布位置来实现。...position:relative; 时，元素也将遵循流动模型的规则；随HTML文档流从左至右、自上而下流动。...">右列div> div> 图3.1.16 单行两列 （1） 浮动布局实现 设置固定宽度，左列浮于容器的左侧，右列浮于容器右侧，其CSS布局代码如下。...下部的两个链接区域形式相同，左侧被设置为图片链接，右侧为文章列表元素。将左侧的图片与文字链接看作一个段落，用 p标签表示，右侧文章列表使用ul+ li无序列表。 其页面设计步骤如下： 1....，可以为左对齐、右对齐或居中对齐 name 设定框架页面的名称 marginwidth 设置页面与边框的水平间距 marginheight 设置页面与边框的垂直间距 scrolling 设定浮动框架页面内是否显示滚动条
右 下 center top 中 上 center center 中 中 center bottom 中 下 x% y% 第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100%...属性规定文本块中首行文本的缩进 p{ text-indent:50px; } 如果值是负数，将第一行左缩进 表格属性 表格边框：指定CSS表格边框，使用border属性 table, td {...属性设置水平对齐方式，向左，右，或中心 td { text-align:right; } td { height:50px; vertical-align:bottom; } 表格填充：如果在表的内容中控制空格之间的边框...: row | row-reverse | column | column-reverse row：横向从左到右排列（左对齐），默认的排列方式 row-reverse：反转横向排列（右对齐，从后往前排...，最后一项排在最前面 column：纵向排列 column-reverse：反转纵向排列，从后往前排，最后一项排在最上面 justify-content 属性：内容对齐（justify-content
一、顶部固定定位搜索栏 需求 : 制作如下搜索栏 ; 1、固定定位盒子居中对齐 首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ; /* 固定定位盒子始终显示在浏览器中指定的位置...top: 0; 再后 , 设置 left: 50% 样式 , 将盒子左侧设置到中心位置 , 这个 50% 是相对于父容器的 比例 , 也就是浏览器 ; /* 将固定定位的盒子在页面中居中对齐...height: 15px; /* 设置二倍精灵图 : 该图片在缩小一倍的精灵图的 59, 279 位置, 设置背景时将精灵图 向左移动 59 像素...{ /* 图片与文字对齐样式 默认是与文字基线对齐 */ vertical-align: middle; } div { /* css3 盒子模型 */ box-sizing.../ position: fixed; /* 固定定位盒子位置紧贴顶部 */ top: 0; /* 将固定定位的盒子在页面中居中对齐 先将盒子左侧设置到中心位置
vertical-rl: 块流向从右向左。对应的文本方向是纵向的。 vertical-lr: 块流向从左向右。对应的文本方向是纵向的。...文本方向 使用 direction 属性设置文本的阅读方向，从左到右（ltr）、从右到左（rtl）。 适用于多语言网站，根据文本语言设定阅读方向，有些语言（如阿拉伯语）是横向书写的，但是是从右向左。...示例： 这段文本向左对齐 这段文本向右对齐 这段文本居中对齐 效果： 行高 使用 line-height 属性，可设置文本行与行之间的高度。...h-shadow：水平阴影的位置。可以为正值（向右偏移）或负值（向左偏移）。 v-shadow：垂直阴影的位置。可以为正值（向下偏移）或负值（向上偏移）。 blur：可选。
文字属性 文字对齐 text-align 属性规定元素中的文本的水平对齐方式。...CSS盒子模型 margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。...： 提供一个，用于四边； 提供两个，第一个用于上－下，第二个用于左－右； 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下； 提供四个参数值，将按上－右－下－左的顺序作用于四边； float...对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。...absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。
拖拽 从组件列表到画布 一个元素如果要设为可拖拽，必须给它添加一个 draggable 属性。...点击组件时，将 8 个小圆点显示出来。 起作用的是这行代码 :active="item === curComponent"。 3. 计算每个小圆点的位置。...> 代码逻辑很简单，就是遍历组件的 style 对象，将每一个属性遍历出来。...为了方便用户修改属性值，我使用 v-model 将组件和值绑定在一起。 image.png 9. 预览、保存代码 预览和编辑的渲染原理是一样的，区别是不需要编辑功能。...{ label: '光速从右退出', value: 'lightSpeedOutRight' }, { label: '光速从左退出', value: 'lightSpeedOutLeft
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
