css基础之盒子模型、浮动问题

盒子模型

一、盒子模型的组成

border边框、content内容、padding内边距、margin外边距(与另外盒子的距离)

1.边框

border-width
border-style: solid实线 border-style: dashed虚线 border-style: dotted点线
border-color

border: 1pxx solid pink;复合写法,无顺序
border-top上边框border-bottom下边框border-left左边框border-right右边框
border-collapse: collapse表示相邻边框合到一起

2.内边距padding

如果盒子已经有了大小,再加内边距,盒子会变大
如果没有指定宽度,加内边距,盒子不变
padding-left: 10px (right,top,bottom)
复合写法:padding: 1px;
一个值:上下左右
两个值:上下,左右
三个值:上,下,左右
四个值:上,右,下,左,顺时针

3.外边距margin

可以让盒子水平居中但要满足两个条件:
必须指定宽度,左右外边距都设置为auto
常用:magin:0,auto;
注意:让行内元素或行内块元素水平居中只需给父元素添加text-align: center;
塌陷问题:对于嵌套的父子块元素,当父元素有上外边距子元素也有上外边距,父元素会塌陷较大的外边距值
三种解决方法:
给父元素定义上边框
给父元素定义上内边距
为父元素添加overflow:hidden

4.清除内外边距(一般是css代码的第一句)

  • {
    padding: 0;
    margin: 0;
    }
    注意:行内元素为了照顾兼容性尽量只设置左右边距,不要设置上下,但转换为块级或行内块就可以了

二、ps基本操作

文件,打开:可以打开要测量的图片
ctrl+R:可以打开标尺(视图+标尺)
ctrl+放大ctrl-缩小
空格键变小手,可以拖动ps视图
选区工具测量大小,空白处点击取消选区

三、圆角边框

1.圆角边框的原理

border-radius: length;length为四个角圆的半径,值越大,弧线越大

2.圆角边框的使用

将正方形改为圆形:
border-radius: 边长50%px;
将长方形改为椭圆:
border1-radius: 短边
50%px;
可以设置不同的圆角:
border-radius: 左上右上右下左下;从左上开始顺时针
或者:
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

四、盒子阴影box-shadow

h-shadow:必需,水平阴影,负值左移正值右移
v-shadow:必需,垂直阴影,负值上移,正值下移
blur:模糊距离(为0时影子为实)
spread:阴影的尺寸
color:一般为rgba(0,0,0,0.3)30%的黑色
insert:将外阴影改为内阴影

注意:盒子阴影不占用空间,不影响排列
使鼠标经停盒子才出现阴影

<style>div:hover {box-shadow:10px 10px 10px -4px rgba(0,0,0,0.3);}
</style>

五、文字阴影text-shadow

h-shadow:必需,水平阴影,负值左移正值右移
v-shadow:必需,垂直阴影,负值上移,正值下移
blur:模糊距离
color:一般为rgba(0,0,0,0.3)30%的黑色

浮动问题

一、浮动基本定义

1.定义

float属性用于创建浮动窗,将其移动一边,直到左边缘或右边缘触及包含块或另一个浮动窗的边缘

2.语法

选择器{
float:属性;
}
属性:none不浮动,left向左浮动,right向右浮动;

二、浮动特性

1.最重要特性

脱标:脱离标准普通流的控制移动到指定位置
浮动的盒子不再保留原先的位置

2.如果多个盒子都加了浮动特性,那么所有盒子都在一行内显示,没有空隙,且顶端对齐

3.浮动元素具有行内块元素特性

任何元素在添加浮动特性都可以浮动
注意:如果块级元素没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容决定

4.注意:

浮动元素经常和标准流父级搭配使用:先用标准流的父级排列上下位置,再用子级采用浮动排列左右位置
一个元素浮动,理论上其它兄弟元素跟着浮动:浮动的盒子只会影响后面的标准流

5.为什么要清除浮动

当子盒子元素较多,或文字较多,不方便给父盒子的高度时,我们想要有多少子元素就撑开父元素

6.清除浮动本质

清除浮动的本质是清除浮动元素的影响
如果父盒子本身有高度,则不需要清除浮动
清除浮动之后,父级会根据浮动的子盒子自动检测高度,父级有了高度就不会影响下面的标准流
选择器{clear:属性值;}
属性值:left,right,both(几乎只用both)

7.清除浮动的方法

额外标签法:在最后一个浮动盒子后添加一个空的块级标签(或者</br>)
例如:<div class="qingchu"> </div>,调用.qingchu{clear:both;}
父级添加overflow属性:将其属性值设置为hidden或auto或scroll
父级添加after伪元素

.clearfix:after{content: "";display: block;height: 0;clear: both;visibility: hidden;
}
.clearfix {*zoom: 1;/*zoom照顾I6I7低版本的浏览器*/
}

父级添加双伪元素

.clearfix:before,.clearfix:after{content: "";display: table;
}
.clearfix {clear:both;
}
.clearfix {*zoom: 1;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/6852.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络链路管理:智能化与自动化并行,打造稳定高效的网络环境

在当今复杂的网络环境中&#xff0c;链路管理显得尤为重要。一条稳定、高效的链路是确保网络顺畅运行的关键。监控易作为一款领先的网络监控与管理系统&#xff0c;深知链路管理的重要性&#xff0c;并致力于为用户提供智能化、自动化的链路管理解决方案。 智能添加网络链路信…

Leetcode 3134. Find the Median of the Uniqueness Array

Leetcode 3134. Find the Median of the Uniqueness Array 1. 解题思路2. 代码实现 题目链接&#xff1a;3134. Find the Median of the Uniqueness Array 1. 解题思路 这一题一开始没有自力搞定也是有点惭愧&#xff0c;思路上其实还挺好想的&#xff0c;看了一下其他大佬们…

求解亲和数

【问题描述】 古希腊数学家毕达哥拉斯在自然数研究中发现&#xff0c;220的所有真约数&#xff08;即不是自身 的约数&#xff09;之和为&#xff1a; 1245101120224455110284。而284的所有真约数为1、2、4、71、142&#xff0c;加起来恰好为220。人 们对这样的数感到很惊奇&am…

Spring Cloud架构进化实操:Eureka、Apollo、OpenFeign、Ribbon、Zuul组件

文章目录 前言一、引出二、服务注册与发现2.1 创建Eureka注册中心2.1.1 引入pom依赖2.1.2 配置yaml2.1.3 启动服务21.4 测试访问 2.2 创建服务提供者2.2.1 配置yaml2.2.2 启动服务2.2.3 测试访问 2.3 创建服务消费者2.3.1 服务提供者接口2.3.2 服务消费者调用接口 三、负载均衡…

用户中心(优化)

文章目录 功能扩充管理员修改用户信息管理员删除用户管理员添加用户添加个人主页&#xff0c;可以完善个人信息&#xff08;上传头像没有实现&#xff09;添加默认头像打造一个所有用户可发帖的页面前端页面&#xff0c;√后端建表&#xff0c;接口&#xff0c;√前后端联调√ …

W801学习笔记二十:宋词学习应用

前三章完成了唐诗的应用&#xff0c;本章将实现宋词的学习应用。 宋词与唐诗的区别不大&#xff0c;马上开始。 1、我们需要参考前面唐诗的方式&#xff0c;把宋词文本下载下来&#xff0c;并进行格式整理。 W801学习笔记十七&#xff1a;古诗学习应用——上 2、在菜单中添加…

[论文阅读]Adversarial Autoencoders(aae)和代码

In this paper, we propose the “adversarial autoencoder” (AAE), which is a probabilistic autoencoder that uses the recently proposed generative adversarial networks (GAN) to perform variational inference by matching the aggregated posterior of the hidden …

proxmox宿主机安装桌面

装完proxmox启动后一般进入shell界面&#xff0c;之后都是另外一台电脑连接web管理等操作&#xff0c;一直用起来还好。不过这样需要另外一台电脑连接管理操作&#xff0c;有时候调试时毕竟还是会有些不方便&#xff0c;就想能不能在宿主机上装个桌面做这类事&#xff0c;今天用…

python数据分析——大数据和云计算

大数据和云计算 前言一、大数据二、大数据定义三、数据存储单位四、大数据存储技术五、大数据应用技术六、大数据特征七、数据容量八、数据类型的多样性8.1结构化数据8.2半结构化数据8.3非结构化数据 九、获取数据的速度十、可变性十一、真实性十二、复杂性十三、价值十四、云计…

传输控制协议TCP

一、TCP简介 TCP是面向连接的&#xff1a; TCP连接只能有两个端点&#xff0c;TCP连接是点对点的&#xff1b; TCP提供可靠交互的服务&#xff1b; TCP提供全双工通信。 面向字节流&#xff1a; TCP中的“流”指的是流入或流出进程的字节序列&#xff1b; 虽然应用程序和…

理解 python 中的* 打包和解包

注意&#xff0c; 本文的打包和解包的概念有点类似与java 的装箱和解箱 但是还是有点区别 java 中的装箱指的是 把一系列的值让放入1个对象的属性中 而python的打包概念 包括 把一组元素打包成1个list or tuple把一系列 key value pair 打包成1个dict Python * 的基本功能&a…

Mac基于Docker-ubuntu构建c/c++编译环境

编译环境安装和使用被充分验证&#xff0c;如有期望补充的内容欢迎留言评论。 目录 前言 Docker desktop下载安装 修改镜像源 选择ubuntu镜像 docker容器启动 参数说明: 宿主机与docker容器文件共享 宿主机与docker容器拷贝文件 为 Ubuntu 配置 ssh、vim、make 相关工…

Flyway使用教程

Flyway使用教程 背景&#xff1a; 在开发环境对多个不同版本的分支进行开发&#xff0c;如果此时涉及到多张表结构修改&#xff08;比如新增字段&#xff09;&#xff0c;而在测试环境时却忘了整理SQL 脚本给测试人员执行&#xff0c;就会导致出现 bug&#xff0c;从而影响测试…

Android selinux权限

一.SE 概述 SELinux 是由美国NSA&#xff08;国安局&#xff09;和 SCC 开发的 Linux的一个扩张强制访问控制安全模块。原先是在Fluke上开发的&#xff0c;2000年以 GNU GPL 发布。从 fedora core 2开始&#xff0c; 2.6内核的版本都支持SELinux。 在 SELinux 出现之前&#…

神经网络模型里面权重衰减的理解

概述 神经网络模型里面&#xff0c;如果少部分参数的绝对值相对其他值过大&#xff0c;就会造成模型过度依赖于某些特征&#xff08;由这些较大值所代表&#xff09;&#xff0c;从而更容易产生过拟合问题。因而&#xff0c;我们有必要针对权重设置一种衰减措施&#xff0c;避…

PHP ASCII码的字符串用mb_convert_encoding 转utf-8之后不生效

检测数据类型是ascii,转码之后再检测还是utf-8没生效 private function toUTF8($str){$encode mb_detect_encoding($str, array("ASCII",UTF-8,"GB2312","GBK",BIG5,LATIN1));if ($encode ! UTF-8) {$str1 mb_convert_encoding($str, UTF-8, …

个人银行账户管理程序(2)

在&#xff08;1&#xff09;的基础上进行改进 1&#xff1a;增加一个静态成员函数total&#xff0c;记录账户总金额和静态成员函数getTotal 2对不需要改变的对象进行const修饰 3多文件实现 account。h文件 #ifndef _ACCOUNT_ #define _ACCOUNT_ class SavingAccount {pri…

力扣经典150题第五十三题:基本计算器

目录 力扣经典150题第五十六题&#xff1a;基本计算器示例提示解题思路 力扣经典150题第五十六题&#xff1a;基本计算器 给你一个字符串表达式 s &#xff0c;请你实现一个基本计算器来计算并返回它的值。 注意:不允许使用任何将字符串作为数学表达式计算的内置函数&#xf…

C#中环境变量

环境变量 什么是环境变量Environment.GetEnvironmentVariable 用于获取指定环境变量的值怎么知道环境变量存不存在&#xff1f;不存在怎么创建&#xff1f; 什么是环境变量 环境变量是操作系统中存储的一种机制&#xff0c;用于保存与操作系统环境和应用程序运行相关的配置信息…

HTML 建立列表——列表标签

HTML 建立列表——列表标签 建立和使用列表 定义列表 <dl></dl>列表标签定义列表; <dt>定义列表标题; <dd>定义列表内容; 说明: 1. dt和dd对应着的, 一个dt可以对应着多个dd; 2. dd完全是为了dt服务的, 对标题进行描述; 实例: <dl> <…