学习
实践
活动
专区
工具
TVP
写文章

前端课程——盒子模型

下外边距(margin-bottom)控制控制块级元素一个兄弟元素位置 右外边距(margin-right)控制内联元素或行内会计元素一个兄弟元素位置. margin-left 正值:向右移动 负值:向左移动 margin-top 正值:向下移动 负值:向下移动 margin-bottom 正值:下一个兄弟元素向下移动 负值:下一个兄弟元素向上移动 margin-right 正值:下一个兄弟元素向右移动 盒子模型类型 块级元素 可以设置宽高 内联元素 水平方向内边距有效 - 控制文本内容水平方向位置 垂直方向内边距有效 - 文本内容位置没有变化,内边距向上和向下进行扩展 垂直方向外边距无效 - 上外边距和下外边距 水平方向外边距有效 行内块级元素 块级元素相同 盒子模型类型 box- sizing属性用于设置盒子模型类型,该属性具有两个: ●content-box: 解决方案: 简单解决方案有两种: 为上一个元素设置下外边距为300px 为下一个元素设置上外边距为300px 网上方法 可以两个元素中间再添加一个元素.但不推荐.因为 为了解决间题增加无用元素和内容

28810

做不好阴影模糊?UI设计师看这一篇就够了

诸如Sketch之类某些工具也具有“ spread”值,使阴影看起来像是较小元素正在投射阴影(静电注:如上图左侧所示,阴影面积比较小)。 任何阴影中,最重要部分是X,Y偏移和模糊。 下面的示例,这个元素包含三个阴影,每个阴影向下移3个点。 ? Neumorphism(新拟物风-同态) 在这种新拟物风格中,阴影和负X和Y值堆叠,是使Neumorphism工作所需核心原理。 ? 内阴影(Inner Shadow) 内阴影UI中相对较少。它具有阴影相同参数,但它出现在对象内部。 内阴影之所以用不多,是因为它们看起来像堆叠在一起两个层。 在这种情况下,可以追加外部阴影,因为它可以提供深度。这样可以看起来更加自然。如果单纯使用内阴影,会让元素看起来就像一个凹进去洞。 ? 左侧示例使用了经典图层叠加。 反过来,这导致了Neumorphism最大可访问性缺陷之一。 ? 02.模糊(Blur) 如今,大多数设计工具都具有高斯类型模糊效果,可以各个方向上均匀地扩展效果。它主要值是半径。

1.7K20
  • 广告
    关闭

    热门业务场景教学

    个人网站、项目部署、开发环境、游戏服务器、图床、渲染训练等免费搭建教程,多款云服务器20元起。

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

    CSS布局(二) 盒子模型属性

    、absolute、inline-block元素)   2、只发生在垂直方向上(不考虑writing-mode) 【分类】   margin重叠情况 1、相邻兄弟元素 <style> p{

    兄弟

     2、父级元素和第一个或最后一个元素,父子级margin重叠又叫margin传递 <style> .box{ background-color: pink 这样,使页面结构更具有健壮性,最后一个元素移除或位置调换,都不会破坏原生布局 2.auto   只有width/height和margin可以设置auto。 所以IE下虚线显得比较密   关于点线dotted,chrome下,点线是点;而在IE/firefox下,点线是圆点 border-style:none(默认) border-style:hidden   2、边框在内阴影之上,内阴影背景图片之上,背景图片在背景色之上,背景色在外阴影之上   3、内阴影元素没有任何效果   4、最先写阴影最顶层   5、该属性border-radius

    72270

    第93天:CSS3 中边框详解

    CSS3 边框详解 其中边框圆角、边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则特征,我们需要重点掌握。 /”进行分隔,遵循“1,2,3,4”规则,“/”前面的1~4个用来设置横轴半径(分别对应横轴1、2、3、4位置 ),“/”后面1~4个参数用来设置纵轴半径(分别对应纵轴1、2、3、4位置 ) 二、边框阴影 box-shadow  text/shadow 用法差不多 1、水平偏移量 正值向右 负值向左; 2、垂直偏移量 正值向下 负值向上; box-shadow: 5px 5px 27px red, -5px -5px 27px green; 3、模糊度是不能为负值; 4、inset可以设置内阴影; 设置边框阴影不会改变盒子大小,即不会影响其兄弟元素布局。 可以设置多重边框阴影,实现更好效果,增强立体感。

    29240

    CSS基础知识点整理笔记

    定义后代选择器 div > p 定义子元素选择器 p + li 相邻兄弟选择器,两者有相同元素,选择是前一个选择器相邻一个选择器 讲一下css3弹性布局 答案解析: 弹性布局是css3新属性 ,是一种当页面需要去适应不同类型和屏幕大小时确保元素能够具有恰当行为布局。 可以用来解决子元素浮动,父元素高度没有了、两栏布局右栏不自适应、垂直方向上元素边距有误等情况。 这一面解决了大文件不便维护问题,另一面也解决了一堆文件加载时性能问题 例如在css使用变量、简单程序逻辑、函数等等在编程语言中一些基本技巧,可以让我们css更加简洁、适应性更强,代码直观 box-shadow属性详解 box-shadow:offset-x offset-y blur spread color position //从左到右表示:x轴偏移量、y轴偏移量、阴影模糊半径

    23520

    寒假提升 | Day6 CSS 第四部分

    写出案例,证明CSS属性继承性 当给父元素div(类名为box)设置font-size,color,text-align这些属性时,由于这些属性具有继承性,所以该父元素所有子元素(p,span,div margin一般是用来设置兄弟元素之间间距 padding一般是用来设置父子元素之间间距 上下margin折叠 垂直方向上相邻2个 margin( margin-top 、 margin-bottom 只设置其中一个元素margin 上下margin折叠情况 块级元素居中 一些需求中,需要元素元素中水平居中显示(父元素一般都是块级元素、inline-block) 行内级元素(包括 inline-block >:blur-radius, 模糊半径 第4个<length>:spread-radius, 延伸半径 <color>:阴影颜色,如果没有设置,就跟随color属性颜色 inset:外框阴影变成内框阴影 文字阴影 - text-shadow text-shadow用法类似于 box-shadow ,用于给文字添加阴影效果 <shadow>常见格式如下(没有向内) 我们可以通过一个网站测试文字阴影:

    12320

    css学习笔记,持续记录。

    兄弟选择器:E~F{sRules},选择E元素后面的所有兄弟元素F,元素EF必须同属一个父级,“~” 左右空格无影响。 6. 第一个同级兄弟元素 :last-of-type CSS3最后一个同级兄弟元素 :only-of-type CSS3唯一一个同级兄弟元素 :nth-of-type() CSS3第n个同级兄弟元素 :nth-last-of-type <offset-y>:设置垂直偏移量,正值阴影则位于元素下方,负值阴影则位于元素上方。取值参见<length>。 <blur-radius>:设置阴影模糊值。值越大,模糊面积越大,阴影就越大越淡。 默认为0,此时阴影边缘锐利。对于长而直阴影边缘,它会创建一个过渡颜色用于模糊阴影边缘为中心、模糊半径为半径局域,过渡颜色范围在完整阴影颜色到它最外面的终点透明之间。 BFC是一个块级元素,块级元素垂直方向上依次排列。 BFC是一个独立容器,内部元素不会影响容器外部元素。 属于同一个BFC两个盒子,外边距margin会发生重叠,并且取最大外边距。

    15160

    01-移动端开发教程-CSS3新特性

    学习阶段不需要去做这些重复工作,只需要用第三工具自动化处理就行。后面都会学习: 比如:开发工具前缀插件、gulp自动化处理、webpack自动化处理。 3.2.1 以某元素相对于其父元素兄弟元素位置来获取无素结构伪类 重点理解通过E来确定元素元素。 语法规则 说明 E:first-child 第一个元素 E:last-child 最后一个元素 E:nth-child(n) 第n个子元素,计算方法是E元素全部兄弟元素; E:nth-last-child 可以为负值 <length>②:第2个长度值用来设置对象阴影垂直偏移值。可以为负值 <length>③:如果提供了第3个长度值则用来设置对象阴影模糊值。 该值为空时,则对象阴影类型为外阴影 默认值:none 说明: 设置或检索对象阴影。可以设定多组效果,每组参数值以逗号分隔。设置边框阴影不会改变盒子大小,即不会影响其兄弟元素布局。

    31070

    01-移动端开发教程-CSS3新特性(上)

    学习阶段不需要去做这些重复工作,只需要用第三工具自动化处理就行。后面都会学习: 比如:开发工具前缀插件、gulp自动化处理、webpack自动化处理。 3.2.1 以某元素相对于其父元素兄弟元素位置来获取无素结构伪类 重点理解通过E来确定元素元素。 语法规则 说明 E:first-child 第一个元素 E:last-child 最后一个元素 E:nth-child(n) 第n个子元素,计算方法是E元素全部兄弟元素; E:nth-last-child 可以为负值 <length>②:第2个长度值用来设置对象阴影垂直偏移值。可以为负值 <length>③:如果提供了第3个长度值则用来设置对象阴影模糊值。 设置边框阴影不会改变盒子大小,即不会影响其兄弟元素布局。 可以设置多重边框阴影,实现更好效果,增强立体感。

    67301

    CSS魔法堂:Box-Shadow没那么简单啦:)

    blur radius,默认值为0,阴影模糊度半径。 spread distance,默认值为0,扩展或缩小阴影作用面积。 <color>,阴影颜色,默认color属性一致。 实现原理: 创建一个元素border box尺寸一致阴影盒子; 将阴影盒子定位到于元素border box重合,并位于元素之下; 根据horizontal offset和vertical offset 实现原理(纯个人理解): 创建一个元素padding box尺寸一致阴影盒子; 将阴影盒子定位到于元素padding box重合,并位于元素之上; 水平和垂直各画两条线,分别跟元素padding edge ,可以看到阴影尺寸元素尺寸一模一样。 阴影不仅默认尺寸元素盒子一致,默认形状也一致。也就是元素盒子采用圆角时,阴影默认形状也是圆角。既然说是默认形状一致,就是说可以不一致咯!那到底如何不一致呢,下面我们一起来看个究竟吧! ?

    756100

    CSS3选择器 | 每个前端开发者必须要掌握技术

    E[att] {} : 选择具有att属性E元素 E[att="val"]{}: 选择具有att属性且属性值等于valE元素 E[att~="val"]{}:用于选取属性值中包含指定词汇元素 E[ 选择奇偶行 nth-child(odd)nth-child(even): 不足之处: nth-child选择器计算子元素时,第奇数个元素还是偶数个元素时,是连同父元素所有 子元素一起计算 后边相邻选择器会被选中,第一个li不会被选中 通用兄弟选择器: li ~ li:li后面的所有li元素被选中 子选择器: ul> li:ul后面直接li元素被选中 9.渐进增强、优雅降级 渐进增强( CSS3属性 a)文本阴影: 例: text-shadow:5px 5px 5px #f66; 指定多个阴影:(参数形式为X坐标 Y坐标 阴影模糊程度 阴影颜色) text-shadow:10px 10px (对于标点符号来说,允许标点符号位于行首,不过IE中是不可以) c)word-wrap: 让长单词URL地址自动换行 normal:只允许断字点换行(浏览器保持默认处理) break-word

    13910

    【分享干货】做网页设计常用css代码大全

    轴重复排列*/ background-repeat : repeat-y; /*y轴重复排列*/ 指定背景位置 background-position : 90% 90%; /*背景图片xy轴位置 3.Blru:建立模糊效果 Blur(Add=?, Direction=?, Strength=?) Add:是否单方向模糊,此参数是一个布尔值,true(非0)或false(0)。 Direction:设置模糊方向,其中0度代表垂直向上,然后每45度为一个单位。 Strength:代表模糊象素值。 4.Chroma:把指定颜色设置为透明 Chroma(Color=?) Color:指定阴影颜色。OffX:指定阴影相对于元素水平方向偏移量,整数。 OffY:指定阴影相对于元素垂直方向偏移量,整数。 Positive:是一个布尔值,值为true(非0)时,表示为建立外阴影;为false(0),表示为建立内阴影

    94810

    web前端必备英语词汇都在这儿了,客官你了解多少?

    中国从事程序开发工作的人,似乎英语并不会影响到你找到满意工作,升职加薪。但程序毕竟是歪果人创造,都是由英文和数字表达式所构成,所以掌握开发过程中常用英语词汇还是非常重要。 前段时间无意中发现了之前整理web前端英语词汇,希望对从事前端你有所帮助,不会让英语成为你工作当中软肋! 最小 medium 中间 model 模型 menu 菜单 move 移动 middle 中间 N: nextElementSibling 返回下一个兄弟元素 nextSibling 返回下一个兄弟节点 二次缓动 quintic 五次缓动 quartic 四次缓动 querySelector 根据标签名获取第一个元素 querySelectorAll 获取所有标签名元素 R: repeat scrollLeft 元素左边界 setAttribute 设置节点上属性 submit 提交 scroll 滚动 shadow 阴影 silver 银色 special

    1.5K20

    行列式几何意义

    一个行列式对应着一个数值,这个数值是对行列式中元素经过运算得到。这个运算是元素位置有关系,因此你改变了行列式中列向量或行向量位置当然会改变行列式结果。幸而只改变结果符号。 为底面积平行六面体a方向上进行了切向变换,变换六面体因为底面积不变,高也不变,因此体积不变。 ? ? 矩阵A行列式等于矩阵A转置行列式 ? 行列式化为对角形几何解释: 一个行列式第i行加上j行K倍,可以使第i行一个元素变为0,而这个行列式值不变。这个性质化简行列式时非常有用。 ? 项和构成了这个面积。(面积方向的确定:叉积右手定则) ? 三阶行列式乘积项几何意义: ? 二阶行列式乘积项几何解释类似,三阶行列式乘积项,可以看成具有有方向长方体体积。 也就是说,在三阶阵张成三维平行六面体可以分解为一个个由各座标分量混合积构成长方体。这些小长方体共有六块,其体积具有方向。

    2.4K100

    UI界面中阴影绘制完全攻略!

    首先,咱们谈谈阴影使用场景。 ? 我们使用阴影来强调特定组件,创建深度以屏幕中来创造一个特别的世界,并给出某些组件特定状态。但是,我们在哪里,以及如何明智地使用它们呢? 两种不同状态开关 场景05.重叠项目 如果要在UI界面中重叠两个或者多个元素,则需要添加阴影以便让元素之间具有更多对比度和深度。 ? 总之,使用阴影规则就是,是背景阴影,以及其它UI元素平滑并融合。使用不透明度,模糊数值以及X或者Y轴偏移量,直到获得更加平滑阴影位置。另外,不要让阴影过分夸张,这会分散用户注意力。 ? (对于按钮而言,较少偏移量效果可能更好。) ? 不同Y值偏移量 自然过渡色 对于有颜色元素,一种好做法是为阴影设定元素相同颜色,并使其更暗一些。 比如按钮为绿色,则可以为按钮设定一个更深绿色阴影,并加上小于10%透明度数值。如下图,左侧按钮阴影很自然,右侧则有一层模糊效果,显得不够漂亮。 ?

    1K20

    20个常用CSS技巧,收藏就是捡到

    使用 :not() 菜单上应用/取消应用边框 先给每一个菜单项添加边框 /* add border */ .nav li { border-right: 1px solid #666; } ……然后再除去最后一个元素 当然,如果你元素兄弟元素的话,也可以使用通用兄弟选择符(~): ..nav li:first-child ~ li { border-left: 1px solid #666; } 3. 页面顶部阴影 下面这个简单 css3 代码片段可以给网页加上漂亮顶部阴影效果: body:before { content: ""; position: fixed 禁用鼠标事件 CSS3 新增 pointer-events 让你能够禁用元素鼠标事件,例如,一个连接如果设置了下面的样式就无法点击了。 模糊文本 简单但很漂亮文本模糊效果,简单又好看! .blur { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5); }

    11430

    关注

    腾讯云开发者公众号
    10元无门槛代金券
    洞察腾讯核心技术
    剖析业界实践案例
    腾讯云开发者公众号二维码

    相关产品

    • 云服务器

      云服务器

      云端获取和启用云服务器,并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费,可以为您节约计算成本。 腾讯云服务器(CVM)为您提供安全可靠的弹性云计算服务。只需几分钟,您就可以在云端获取和启用云服务器,并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费,可以为您节约计算成本。

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券