css边框，盒子模型、浮动、定位
边框，盒子模型、浮动、定位
一、边框
border-width : 边框宽度
border-style : 边框样式
1.solid 实线
2.none 无边框
3.dotted 点状虚线边框
4.dashed 矩形虚线边框
border-color : 边框颜色
通常情况下这样写：
border: 2px solid cornflowerblue;
圆角边框：
border-radius: 50%;
二、display属性
用于HTML元素显示效果
行内标签是无法设置长宽的，只有块级可以设置
display:none;可以隐藏某个元素，隐藏的元素不会占用任何空间
visibility:hidden;可以隐藏某个元素，但是隐藏的元素会占用空间，会任然影响布局
display:block; 默认占满整个页面的宽度，如果设置了宽度，则会用margin
填充剩下的部分：
display:inline; 按行内元素设置，此时再设置元素的width,heigth
display:inline-block; 使元素具有 行内元素和块级元素的特点
三、背景案例
background-attachment:fixed;属性
background-attachment设置背景图像是否固定或者随着页面的其他部分滚动
属性值：
fixed:背景图片不会随着页面的滚动而滚动
scroll：背景的图片随着页面的滚动而滚动，这个属性是默认的
local:背景图片会随着元素内容的滚动而滚动
inherit:指定background-attachment的设置应该从父元素继承
四、盒子模型
盒子模型：盒模型，框模型
css将页面汇总所有的元素的都设置为一个个矩形的盒子。将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置，每一个盒子，都有以下几个部分:
内容区(content):所有的元素
边框(border):设置边框
内边距(padding):指的是盒子内容和边框之间的距离
外边框(margin):指的是盒子和盒子之间的距离
1.边框（border） ：元素设置边框
可以分别设置四个边框的宽度：
设置四个值： 上 右 下 左
设置三个值： 上 左右 下
设置两个值： 上下 左右
设置一个值： 上下左右
border-xxx-width:可以设置某一个边框的宽度
一般这样写：border: 2px solid cornflowerblue;
2.内边距（padding）：指的是盒子的内容和边框之间的距离
一共有四个方向：
1.padding-top
2.padding-right
3.padding-left
4.padding-bottom
padding:10px 20px 10px 20px;
设置的顺序也是：上右下左
3.外边距(margin):决定当前盒子和其他盒子的距离(盒子的可见框大小)
外边距不会影响可见框的大小，而是影响盒子的位置
盒子有四个方向的外边距：
margin-top:上边距，也可以设置负值
margin-right:右边距，一般情况下没有效果
margin-bottom:下外边距，设置一个正值，其下面的元素会向下移动，挤别人
margin-left:左外边距，设置正值，元素向右移动
margin:10px 20px 10px 20px;
设置的顺序也是：上右下左
也可以设置：margin:0 auto;
五、浮动
1.浮动
在我们布局的时候用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置
2.浮动原理
使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动的边缘
3.属性
left ------>> 元素向左浮动
right ------>> 元素向右浮动
none ------>> 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit ------>> 规定应该从父元素继承 float 属性的值。
4.浮动带来的影响
浮动的元素是脱离正常的文档流，会造成父标签塌陷
5.解决浮动带来的影响的解决方法
.clearfix:after{
content:'';
display:block;
clear:both;
}
哪个塌陷了给哪个添加上就好了
六、溢出属性
overflow:visible 默认值，内容不会被修剪，会呈现在元素框之外
overflow:hidden 内容会被修剪，并且其余内容是不可见的
overflow:scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
overflow:auto 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容,右侧和底部都有滚动条
overflow:inherit 规定应该从父元素继承overflow属性的值
overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）
七、定位
标签在默认情况下是无法通过定位的参数来移动
针对移动有四种方法：
1.static(静态)：标签默认的状态，无法定位移动
2.relative(相对定位)：基于标签原来的位置
3.absolute(绝对定位)：基于某个定位过的父标签做定位
4.fixed(固定定位)：基于浏览器固定不变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1 {
height: 100px;
width: 100px;
background-color: cornflowerblue;
position: relative;
left: 100px;
}
.d2 {
height: 100px;
width: 100px;
background-color: crimson;
position: relative;
/*left: 100px;*/
}
.d3 {
height: 100px;
width: 100px;
background-color: goldenrod;
position: absolute;
left: 300px;
}
.d1 {
height: 100px;
width: 100px;
background-color: darkblue;
position: fixed;
right: 100px;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2">
<div class="d3">
</div>
</div>
<div class="d4"></div>
</body>
</html>
八、z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。
z-index无论设置多高都不起作用情况，这种情况发生的条件有三个：
1、父标签 position属性为relative；
2、问题标签无position属性（不包括static）；
3、问题标签含有浮动(float)属性。
eg:z-index层级不起作用，浮动会让z-index失效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cover{
background-color: rgba(127,127,127,0.6);
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 999;
}
.modal {
height: 200px;
width: 500px;
background-color: white;
z-index: 1000;
position: fixed;
left: 50%;
top: 50%;
margin-left: -350px;
margin-top: -300px;
}
</style>
</head>
<body>
<div>我在最底下</div>
<div class="cover"></div>
<div class="modal">
<form action="">
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
</form>
</div>
</body>
</html>
九、简易博客页面搭建
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cnblog</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<div class="blog-left">
<!-- 头像 -->
<div class="blog-avatar">
<img src="1.png" alt="">
</div>
<!-- 标题-->
<div class="blog-title">
<span>这是一篇好书推荐</span>
</div>
<div class="blog-info">
<span class="blog-info1"> 生活，其实是没有好坏的，那只是我们在短暂的几十年光景里的一种生命体验。每一寸光阴，都值得收藏。仅此一次的分分秒秒，我们应该怎么去对待？</span>
</div>
<div class="blog-link">
<ul>
<li><a href="">更多的美文</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">向我们投稿</a></li>
</ul>
</div>
<div class="blog-course">
<ul>
<li><a href="">《小王子》</a></li>
<li><a href="">《云边有个小卖部》</a></li>
<li><a href="">《月亮与六便士》</a></li>
</ul>
</div>
</div>
<div class="blog-right">
<div class="article-list">
<div class="article-title">
<img src="2.png" alt="" class="img1">
<div class="title">
<span>《活着》</span>
</div>
<div class="date">
<span>2022/12/02 </span>
</div>
</div>
<div class="article-desc">
<span>讲述了主人公福贵一生的荣与辱、起与落、盛与衰</span>
</div>
<div class="article-end">
<span>#探寻活着的意义</span>
<span>#心态平和地面对人生</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<img src="2.png" alt="" class="img1">
<div class="title">
<span>《活着》</span>
</div>
<div class="date">
<span>2022/12/02 </span>
</div>
</div>
<div class="article-desc">
<span>讲述了主人公福贵一生的荣与辱、起与落、盛与衰</span>
</div>
<div class="article-end">
<span>#探寻活着的意义</span>
<span>#心态平和地面对人生</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<img src="2.png" alt="" class="img1">
<div class="title">
<span>《活着》</span>
</div>
<div class="date">
<span>2022/12/02 </span>
</div>
</div>
<div class="article-desc">
<span>讲述了主人公福贵一生的荣与辱、起与落、盛与衰</span>
</div>
<div class="article-end">
<span>#探寻活着的意义</span>
<span>#心态平和地面对人生</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<img src="2.png" alt="" class="img1">
<div class="title">
<span>《活着》</span>
</div>
<div class="date">
<span>2022/12/02 </span>
</div>
</div>
<div class="article-desc">
<span>讲述了主人公福贵一生的荣与辱、起与落、盛与衰</span>
</div>
<div class="article-end">
<span>#探寻活着的意义</span>
<span>#心态平和地面对人生</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<img src="2.png" alt="" class="img1">
<div class="title">
<span>《活着》</span>
</div>
<div class="date">
<span>2022/12/02 </span>
</div>
</div>
<div class="article-desc">
<span>讲述了主人公福贵一生的荣与辱、起与落、盛与衰</span>
</div>
<div class="article-end">
<span>#探寻活着的意义</span>
<span>#心态平和地面对人生</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<img src="2.png" alt="" class="img1">
<div class="title">
<span>《活着》</span>
</div>
<div class="date">
<span>2022/12/02 </span>
</div>
</div>
<div class="article-desc">
<span>讲述了主人公福贵一生的荣与辱、起与落、盛与衰</span>
</div>
<div class="article-end">
<span>#探寻活着的意义</span>
<span>#心态平和地面对人生</span>
</div>
</div>
</div>
</div>
</body>
</html>
/*页面通用的样式*/
body{
margin: 0;
background-color: #eeeeee;
}
a{
text-decoration: none;
}
ul{
list-style-type: none;
padding-left: 0;
}
/*首页左侧样式*/
.blog-left{
float: left;
width: 20%;
height: 100%;
background-color: cadetblue;
position: fixed;
left: 0;
top: 0;
}
.blog-avatar{
border: 4px solid aliceblue;
width: 160px;
height: 160px;
border-radius: 50%;
margin: 37px ;
/*margin: 18px auto;*/
overflow: hidden;
}
/*使得图片放全*/
.blog-avatar img{
max-width: 100%;
}
.blog-title ,.blog-info{
color: black;
text-align: center;
margin: 37px auto;
}
.blog-info1 {
border: 2px solid white;
margin: 8px;
}
.blog-link,.blog-course{
text-align: center;
margin: 50px auto;
}
.blog-link ul>li,.blog-course ul>li{
padding: 8px;
}
.blog-link a,.blog-course a{
color: black;
font-size: 16px;
}
.blog-link a:hover,.blog-course a:hover{
color: darkgrey;
}
/*右侧样式*/
.blog-right{
float: right;
width: 80%;
height: 100%;
}
.article-list{
background-color: white;
margin: 20px 50px 20px 20px;
box-shadow: 20px 20px 20px rgba(0,0,0,0.5);
border-left: 5px solid cadetblue;
}
.article-list .article-title .img1{
/*float: left;*/
max-width: 100%;
border: 4px solid aliceblue;
width: 120px;
height: 120px;
border-radius: 30%;
margin: 17px ;
/*margin: 18px auto;*/
overflow: hidden;
transition: all 0.2s linear;
}
.article-list .article-title .img1:hover{
transform: scale(0.9);
transition: all 0.2s linear;
}
.blog-right .article-list .article-title .title {
float: right;
font-size: 38px;
margin-top: 8vh;
padding-right: 90vh;
}
.blog-right .article-list .article-title .date {
float: right;
font-size: 18px;
margin-top: -12vh;
margin-right: 5vh;
/*padding-right: 70vh;*/
}
/*.article-list .article-title .title{*/
/* font-size: 38px;*/
/* !*float: left;*!*/
/* margin-top: 0;*/
/* padding-left: 10px;*/
/*}*/
/*.article-list .article-title .date{*/
/* font-size: 18px;*/
/* font-weight: bolder;*/
/* float: right;*/
/* margin: 40px 40px;*/
/*}*/
.article-desc {
font-size: 20px;
font-weight: lighter;
text-indent: 20px;
border-bottom: 1px solid black;
}
.article-end {
padding: 10px 10px 10px 20px;
}
css边框，盒子模型、浮动、定位的更多相关文章
- CSS之盒子模型
CSS核心内容 源文件目录: D:\Users\ylf\Workspaces\MyEclipse 10 标准流 盒子模型 浮动 定位 标准流/非标准流: 标准流:就是普通的 非标准流:实际工作中要打破 ...
- #CSS的盒子模型、元素类型
CSS的盒子模型.元素类型 本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
- 深入了解CSS中盒子模型
CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...
- CSS彻底研究(3) - 浮动,定位
Github pages 博文 CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父 ...
- HTML+CSS之盒子模型
一.元素分类 CSS中html的标签元素大体分为三种类型 1.块状元素 @特点: #每个块级元素都从新的一行开始,并且其后的元素也另起一行(一个块级元素独占一行) #元素的高度.宽度.行高以及顶和底边 ...
- 深入理解CSS系列（一）：理解CSS的盒子模型
接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
- 使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
- CSS 弹性盒子模型
CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...
- css进阶----盒子模型，Reset CSS，css浮动，css定位，z-index属性
盒子模型 把页面上的每一个元素当成一个盒子 由内容,内边距,边框,外边距组成 盒子模型举例 <!DOCTYPE html> <html lang="en"> ...
随机推荐
- VS使用正则表达式删除程序中的空行
Ctrl+H; 需要替换的正则表达式 ^(?([^\r\n])\s)*\r?$\r?\n
- 【转】Linux文件权限
转载一篇写得非常详细的linux文件权限,方便自己查阅! 转载来源:https://www.cnblogs.com/keyi/p/8124841.html ---------------------- ...
- VMware ESXi 8.0 SLIC 2.6 & macOS Unlocker (Oct 2022 GA)
ESXi 8.0.0 GA (General Availability) 请访问原文 VMware ESXi 8.0 SLIC 2.6 & macOS Unlocker (Oct 2022 G ...
- Go语言核心36讲37
你好,我是郝林,今天我们继续来分享并发安全字典sync.Map的内容. 我们在上一篇文章中谈到了,由于并发安全字典提供的方法涉及的键和值的类型都是interface{},所以我们在调用这些方法的时候, ...
- 阿里技术专家详解 DDD 系列- Domain Primitive
简介: 关于DDD的一系列文章,希望能继续在总结前人的基础上发扬光大DDD的思想,但是通过一套我认为合理的代码结构.框架和约束,来降低DDD的实践门槛,提升代码质量.可测试性.安全性.健壮性. 作者| ...
- CentOS Linux 的安装
CentOS Linux 的安装 作者:Grey 原文地址: 博客园:CentOS Linux 的安装 CSDN:CentOS Linux 的安装 说明 本安装说明是基于 Windows 10 下 V ...
- MySQL锁，锁的到底是什么？
MySQL锁系列文章已经鸽了挺久了,最近赶紧挤了挤时间,和大家聊一聊MySQL的锁. 只要学计算机,「锁」永远是一个绕不过的话题.MySQL锁也是一样. 一句话解释MySQL锁: MySQL锁是解决资 ...
- Spring04:JdbcTemplate及事务控制（AOP、XML、注解）
今日内容 Spring中的JdbcTemplate 作业:Spring基于AOP的事务控制 Spring中的事务控制 基于XML的 基于注解的 一.JdbcTemplate 1.JdbcTemplat ...
- 2022年7月10 第四组 周鹏 CSS的基本认识
CSS 层叠样式表 网页美观 html相当于原材料,css用来加工好看 如何嵌入? 样式如何显示html元素? 样式通常存储在样式表中 把样式表添加到html元素里 定义CSS方式 1,行内样式,可以 ...
- 【进阶篇】Redis实战之Jedis使用技巧详解
一.摘要 在上一篇文章中,我们详细的介绍了 redis 的安装和常见的操作命令,以及可视化工具的介绍. 刚知道服务端的操作知识,还是远远不够的,如果想要真正在项目中得到应用,我们还需要一个 redis ...