css总结12(盒子模型外篇)

前言

主要补充一下和盒子模型相关的一些样式属性:box-sizing、resize和outline

box-sizing

可选值

## (1) content-box
默认值,内容盒子,盒子的大小会随着内容(盒子模型的content)尺寸的变化而变化

## (2) border-box
边框盒子,与内容盒子相反,盒子的大小不会随着内容尺寸的改变而改变;
当然该属性只能保证盒子外观即边框和背景尺寸不会改变,并不能避免盒子内容部分的溢出;

效果图

resize

### 前言:
resize和overflow一起使用才有效果,单独使用无效果;
resize用于允许用户改变盒子容器尺寸,使用后右下角会出现特有的标志;


### resize可选值:
## (1) horizontal:仅可水平拉伸
## (2) vertical:仅可竖直拉伸
## (3) both:水平和竖直皆可拉伸


### overflow可选值:
## (1) auto:未超出时不显示滚动条,超出时显示滚动条
## (2) scroll:无论是否超出都显示滚动条
## (3) hidden:超出部分内容隐藏
## (4) visible:默认值,内容超出可见(超出就超出)


### 示例代码:
.div1{
    width:300px;
    height:300px;
    line-height:200px;
    resize:both;
    overflow:auto;
}
.div2{
    width:300px;
    height:300px;
    padding:100px;
    resize:both;
    overflow:hidden;
}

outline 

### 前言:
首先明确,轮廓是在盒子模型border的外面的,不属于盒子模型部分,所以不占文档流空间,修改轮廓并不会影响布局;


### 轮廓样式属性:
## (1) outline-color
轮廓线颜色
## (2) outline-style
轮廓线样式,可选值即线条通用样式值(略)
## (3) outline-width
轮廓线宽度,可选值:thin、medium、thick、具体值
## (4) outline:width style color;
轮廓简写
## (5) outline-offset
一个长度单位数值,设置轮廓与边框的距离


### 注意:
无法像border那样直接给轮廓设置圆角(radius),轮廓的形状会随着边框(border)的形状而变化

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

leetcode究极刷题笔记(16~20)

(16)最接近的三数之和(中等) 实现思路: 本题与前文讲的三数之和有相同之处,但是本题求的是最接近的三数之和,所以我们这里可以使用键值对来映射对应的差值与值的关系,从而达到目的。…

系统集成路由器OSPF动态、综合路由配置

实验任务:动态路由协议RIP、OSPF协议的内容和特点动态路由RIP、OSPF实验,建立拓扑pc1>>R1>>R2>>R3>>pc2,使pc1与pc2能相互通信,并配置PC端静默接口。熟悉配置vlan间路由技术:多层交换机虚拟接…

JavaScript到底如何存储数据?

1.var的迷幻操作 普遍的观点:JavaScript中的基本数据类型是保存在栈空间,而引用数据类型则是保存在堆空间里, 是否正确? 浏览器环境下JavaScript变量类型的运行实践结果: var a 10;console.log(a);console.log(window.a); console.log(wind…

【云原生】Linux进程控制(进程程序替换)

✨个人主页: Yohifo 🎉所属专栏: Linux学习之旅 🎊每篇一句: 图片来源 🎃操作环境: CentOS 7.6 阿里云远程服务器 Good judgment comes from experience, and a lot of that comes from bad jud…

keepalived配置使用

keepalived安装tar -zxvf ***yum install -y gcc gcc-c wget popt-devel openssl openssl-devel yum install -y libnl libnl-devel libnl3 libnl3-devel yum install -y libnfnetlink-devel ./configure --sysconf/etc make make installmaster1 编辑keepalived的配置文件keep…

【C++】科普:C++中的浮点数怎么在计算机中表示?

这里我们以8.25这个数为例说明计算机时如何存取float类型的数据的: float a 8.25;引言 1. 所占位数 首先,明确一个概念,float类型的数据在常规计算机中通常占4个字节,也就是32位。其内存分布如图: 位字段说明所占位…

【pytorch源码剖析系列】优化器

写在前言:pyotrch优化器从源码的角度带你理解优化器的由来,实现,作用。pytorch的优化器:管理并更新模型中可学习参数的值,使得模型输出更接近真是标签。导数:函数在指定坐标轴上的变化率方向导数&#xff1…

ChatGPT来了你慌了吗?

文章目录一、ChatGPT是什么?一、ChatGPT到底多强大?三、各平台集成了ChatGPT插件:四、ChatGPT能否取代程序员?一、ChatGPT是什么? ChatGPT(全名:Chat Generative Pre-trained Transformer&…

快速上手vue elementUI好看的登录界面

这是一个非常非常适合新手的vue登录界面,总体来说美观大气,axios那部分没有发,有需要的大家可以自己进行二次开发,继续编写。 用到了技术栈有 vue/cli 5.07 element-ui 2.15.9 适合入门级新手,展示下页面 emmm验证码…

【Spring Cloud Alibaba】2.服务注册与发现(Nacos安装)

文章目录环境要求简介安装Nacos源码安装Docker安装数据库配置访问服务我们要搭建一个Spring Cloud Alibaba项目就绕不开Nacos,阿里巴巴提供的Nacos组件,可以提供服务注册与发现和分布式配置服务,拥有着淘宝双十一十几年的流量经验&#xff0c…

关于docker mysql 请求速度慢的问题

一,问题描述: 请求mysql 数据库,请求速度很慢,需要六七秒,数据量也不大。使用的是docker 容器启动的mysql 二,问题原因: 网上说的是因为MySQL的dns导致,我实测也是有效果的&#xf…

Linux:主机USB设备驱动简析

文章目录1. 前言2. 分析背景3. USB 总线硬件拓扑4. USB 协议栈概览4.1 Linux USB 子系统概览4.2 USB外设(如U盘)固件基础5. Linux USB 子系统初始化6. Linux USB 主机控制器(HCD) 驱动6.1 USB 主机控制器驱动初始化6.2 USB 主机控制器设备对象注册和驱动加载7. Linux USB 设备驱…

【亲测搭建成功】模拟无网络情况下安装K8S集群和相关组件

目录标题 前言准备工作:k8s集群:先构思网络拓扑图划分网络资源服务器开始搭建服务器操作系统初始化1.关闭防火墙2. 关闭selinux3. 修改网卡配置5.系统模块配置nacos 高可用mysql双主+双从rockemq 集群nginx高可用(双主)Redis 双主、双从minio分布式文件存储前言 最近项目上…

vulnhub Noob渗透笔记

靶机下载地址:https://www.vulnhub.com/entry/noob-1,746/ kali ip 信息收集 依旧我们先使用nmap扫描确定一下靶机ip nmap -sP 192.168.20.0/24发现靶机ip 扫描开放端口 nmap -A -p 1-65535 192.168.20.129 开放21 80 55077端口 先尝试使用匿名账号登录ftp,账户anonym…

linux系统运维面试题大全(137道题)

linux系统运维面试题大全 1、 如何看当前Linux系统有几颗物理CPU和每颗CPU的核数? 查看物理cup: cat /proc/cpuinfo|grep -c ‘physical id’ 查看每颗cup核数 cat /proc/cpuinfo|grep -c ‘processor’ 2、查看系统负载有两个常用的命令,…

STM32 ADC+定时器+DMA+FFT

本次实现的功能为单片机DAC输出一个正弦波,然后ADC定时采样用DMA输出,最后对DAC输出的波形进行FFT。单片机STM32F103ZET6内部时钟一、配置ADCADC端口为PA1,采用DMA输出,定时器3触发定时器时钟64M,分频后为102.4KHzADC采…

Scrapy的callback进入不了回调方法

一、前言 有的时候,Scrapy的callback方法直接被略过了,不去执行其中的回调方法,可能排查好久都排查不出来,我来教大家集中解决方法。 yield Request(urlurl, callbackself.parse_detail, cb_kwargs{item: item})二、解决方法 1…

基于QEMU-aarch64学习UEFI(EDK2)-1环境搭建

基于QEMU-aarch64学习UEFI(EDK2)-1环境搭建 文章目录基于QEMU-aarch64学习UEFI(EDK2)-1环境搭建一、环境搭建1、虚拟机Ubuntu系统安装2、docker镜像导入3、下载EDK2源码4、容器创建和代码编译4.1 容器创建4.2 代码编译5、运行QEMU_EFI.fd6、VSCODE配置7、日常工作8、不同项目的…

数据结构——二叉树与堆

作者:几冬雪来 时间: 内容:二叉树与堆内容讲解 目录 前言: 1.完全二叉树的存储: 2.堆的实现: 1.创建文件: 2.定义结构体: 3.初始化结构体: 4.扩容空间与扩容…

学习黑客十余年,如何成为一名高级的安全工程师?

1. 前言 说实话,一直到现在,我都认为绝大多数看我这篇文章的读者最后终究会放弃,原因很简单,自学终究是一种适合于极少数人的学习方法,而且非常非常慢,在这个过程中的变数过大,稍有不慎&#…
最新文章