首页 > 其他分享 >前端开发:3、CSS之边框、盒子模型、浮动、溢出、定位、重叠、display

前端开发:3、CSS之边框、盒子模型、浮动、溢出、定位、重叠、display

时间:2022-12-04 12:22:19浏览次数:50  
标签:浮动 元素 前端开发 边框 border display CSS 属性

前端开发之CSS

目录

一、CSS之边框

​ CSS border属性允许您指定元素边框的宽度、样式和颜色。

​ 支持单侧修改、属性名简写

1、单侧修改-以左侧为例(left)
	border-left-width:5px;
	border-left-styl:dotted;
	border-left-color:red

	简写:
		border-left:5px dotted red

2、多侧同时修改
	border:5px dotted red

3、变宽倒角
	border-radius:50%

CSS 边框样式

border-style 属性指定要显示的边框类型。

允许以下值:

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • groove - 定义 3D 坡口边框。效果取决于 border-color 值
  • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
  • inset - 定义 3D inset 边框。效果取决于 border-color 值
  • outset - 定义 3D outset 边框。效果取决于 border-color 值
  • none - 定义无边框
  • hidden - 定义隐藏边框

二、display属性

描述
none 彻底隐藏标签,页面上不会显示标签且不会保留标签位置
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。

补充:

​ 1、visibility: hidden 与none较为相似,隐藏的不彻底,页面会保留标签位置

​ 2、行内标签无法设置长款,只有块儿级标签可以设置

三、盒子模型

​ 可以将标签看成是一个盒子

  • 1、盒子里面的实际物体

    • content(内容)
  • 2、盒子内物体与盒子墙壁的距离

    • padding(内边距、内填充)
  • 3、盒子的厚度

    • border(变宽)
  • 4、盒子与盒子的距离,可以看成多个盒子排列在一起

    • margin(边境)
/*    !*padding: 20px; 上下左右*!*/
/*    !*padding: 20px 40px;  上下   左右*!*/
/*    !*padding: 10px 20px 30px;上  左右  下*!*/
/*    !*padding: 10px 20px 30px 40px;上 右 下 左*!*/
margin与padding用法一致

针对标签的嵌套 水平方向可以居中
margin: 0 auto;

四、CSS之浮动

float 属性

float 属性用于定位和格式化内容,例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一:

  • left - 元素浮动到其容器的左侧
  • right - 元素浮动在其容器的右侧
  • none - 元素不会浮动(将显示在文本中刚出现的位置)。默认值。
  • inherit - 元素继承其父级的 float 值

clear 属性

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear 属性可设置以下值之一:

  • none - 允许两侧都有浮动元素。默认值
  • left - 左侧不允许浮动元素
  • right- 右侧不允许浮动元素
  • both - 左侧或右侧均不允许浮动元素
  • inherit - 元素继承其父级的 clear 值

使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

在清除浮动时,应该对清除与浮动进行匹配:如果某个元素浮动到左侧,则应清除左侧。您的浮动元素会继续浮动,但是被清除的元素将显示在其下方。

清除浮动

​ 如果一个元素比包含它的元素高,并且它是浮动的,它将“溢出”到其容器之外:

​ 然后我们可以向包含元素添加 overflow: auto;,来解决此问题:

.clearfix {
  overflow: auto;
}

​ 只要您能够控制外边距和内边距(否则您可能会看到滚动条),overflow: auto clearfix 就会很好地工作。但是,新的现代 clearfix hack 技术使用起来更安全,以下代码被应用于多数网站:

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

五、CSS之溢出

Overflow

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值:

  • visible - 默认。溢出没有被剪裁。内容在元素框外渲染
  • hidden - 溢出被剪裁,其余内容将不可见
  • scroll - 溢出被剪裁,同时添加滚动条以查看其余内容
  • auto - 与 scroll 类似,但仅在必要时添加滚动条

注释:overflow 属性仅适用于具有指定高度的块元素。

注释:在 OS X Lion(在 Mac 上)中,滚动条默认情况下是隐藏的,并且仅在使用时显示(即使设置了 "overflow:scroll")。

六、CSS之定位

position 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值:

  • static静态(标签默认的状态 无法定位移动)
  • relative相对定位(基于标签原来的位置)
  • fixed固定定位(基于浏览器窗口固定不动)
  • absolute绝对定位(基于某个定位过的父标签做定位)
  • sticky据用户的滚动位置进行定位。

元素其实是使用 top、bottom、left 和 right 属性定位的。但是,除非首先设置了 position 属性,否则这些属性将不起作用。根据不同的 position 值,它们的工作方式也不同。

        .c1 {
            background-color: red;
            height: 100px;
            width: 100px;
            position: relative;
        }
        .c2 {
            background-color: greenyellow;
            height: 100px;
            width: 200px;
            position: absolute;
            top: 100px;
            left: 100px;
        }
		.c1 {
            border: 5px solid black;
            height: 100px;
            width: 100px;
            position: fixed;
            right: 100px;
            bottom: 200px;
        }

六、CSS之重叠元素

Z-index

在对元素进行定位时,它们可以与其他元素重叠。

z-index 属性指定元素的堆栈顺序(哪个元素应放置在其他元素的前面或后面)。

元素可以设置正或负的堆叠顺序:

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

标签:浮动,元素,前端开发,边框,border,display,CSS,属性
From: https://www.cnblogs.com/kangssssh/p/16949630.html

相关文章

  • css 滤镜效果
    如何让网站变灰在这些变灰的网站中我们总能在根元素上根选择器::roothtmlelement.style中找到一个与滤镜相关的css属性filter:greyscale(1)这添加的是一层滤镜效......
  • maven项目中css无法渲染问题
    一.解决1.在spring-mvc.xml中配置(控制层)<!--视图解析器--><beanclass="org.springframework.web.servlet.view.InternalResourceViewResolver"><propert......
  • css选择器选择奇数行或偶数行
    css选择器选择奇数行或偶数行实现方式有两种方式一:nth-child/*奇数行*/div:nth-child(odd){}/*偶数行*/div:nth-child(even){}:nth-child(n)选择器匹......
  • CSS记一些零碎点
    flex-basisflex-basis表示items被放入flex容器前的大小,也就是items的理想大小,不是真实大小(item真实大小取决于flex容器的宽度)flex-basis与width同时存在时......
  • scss
    SCSS语法一、变量以$开头默认变量是可以被覆盖的特殊变量:$fontSize:14px;font:#{$fontSize}多值变量:list(类似js数组)和map(类似js对象)两种类型二、嵌套......
  • 网站整体变灰-css
    加入以下样式html{filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-f......
  • vsCode的css代码提示reference,怎么关闭?
      设置中,去掉Editor:CodeLens对勾 ......
  • 简易博客页面小项目 html css
    项目预览代码html:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"type="text/css"hr......
  • HBuilderX.3.2.9前端开发软件下载
    关注微信公众号【工控羊】或者微信号【gksheep】,微信公众号后台输入数字编号【0006】即可获取下载链接。......
  • js向ul标签添加li并且li标签有修改删除按钮+js中添加颜色css样式(使用layui下拉)
    js向ul标签添加li并且li标签有修改删除按钮Layui当中的导航条动态添加效果:1、html放置ul标签<ulclass="layui-nav"id="nav"layui-filter="test"></ul>/2、js编......