CSS

一,盒子模型:

1,border:

          (1  border-width: 5px;

         (2   border-style: solid;实线

dotted :  点线。dashed :  虚线。
solid :  实线边框

          (3  border-color: aqua;

简写:border:5px,solid,pink;不分顺序

 (4,表格细线边框:   border-collapse: collapase

(5,边框会影响盒子实际大小

2,内边距padding:

padding-top/bottom/left/right:

简写:

注意: 

如果 盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小

3,外边距margin:

margin-left/right/top/bottom:

margin的简写与padding一样

典型应用:让块级盒子水平居中,但必须满足2个条件: 

(1,盒子必须指定了宽度width

(2,盒子左右的外边距都设置为auto   margin:0 auto;

外边距合并:

(1,

(2, 

3,清除内外边距:

不同浏览器的默认内外边距不同

二,PS基本操作:

三,圆角边框(重点)

四,盒子阴影(重点)

五,文字阴影

六,CSS浮动:

1,传统网页布局

2,为什么需要浮动

3,什么是浮动?

4,浮动特性(重难点!!!)

(1,浮动元素会脱离标准流(脱标)

(2,浮动元素会一行内显示并且元素顶部对齐

    一行内装不下会自动换行

     浮动的元素之间不会有缝隙

(3,浮动元素会具有行内块元素的特性(重难点)

5,浮动元素经常和标准流父级搭配使用

6,浮动的两个注意事项:

7,清除浮动:

(1,为什么需要清除浮动?

(2,清除浮动的本质

(3,语法:

选择器 {clear:属性值;}

属性值:left(不允许左侧有浮动元素,清除左侧浮动的影响),right,both

实际工作中,几乎只用clear:both;

清除浮动的策略是:闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子

8,清除浮动的方法:

(1,额外标签法即隔墙法,W3C推荐的做法

 

(2,父级添加overflow属性

(3,父级添加after属性

.clearfix:after {
        content: '';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {
        /* 为 IE6、IE7浏览器设置的清除浮动 */
        *zoom: 1;
    }

(4,父级添加双伪元素

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

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

相关文章

为什么网站需要SSL证书?

在当今数字化的世界里,网站安全性已经成为互联网用户关注的重点。SSL证书(Secure Sockets Layer)作为一种安全技术,已经成为保障网站安全性的基本工具。下面让我们来看看为什么网站需要SSL证书以及安装后的各种好处。 永久免费SS…

C#中(, ||)与(, |)的区别

前言 在C#编程语言中,逻辑运算符用于组合和比较条件,以控制程序的流程和行为。在逻辑运算符中,有两对非常重要的运算符:&&和||、&和|。尽管它们看起来很相似,但其实它们有着不同的行为和使用场景。下面我们…

鸿蒙4.0核心技术-WebGL开发

场景介绍 WebGL主要帮助开发者在前端开发中完成图形图像的相关处理,比如绘制彩色图形等。 接口说明 表1 WebGL主要接口列表 接口名描述canvas.getContext获取canvas对象上下文。webgl.createBuffer(): WebGLBuffernullwebgl.bindBuffer(target: GLenum, buffer: …

【【UART 传输数据实验】】

UART 传输数据实验 通信方式在日常的应用中一般分为串行通信(serial communication)和并行通信(parallel communication)。 我们再来了解下串行通信的特点。串行通信是指数据在一条数据线上,一比特接一比特地按顺序传…

【SpringCloudAlibaba】Sentinel熔断限流工具的使用

一、前言 随着微服务的流行,服务和服务之间的稳定性变得越来越重要。Sentinel 是面向分布式、多语言异构化服务架构的流量治理组件,主要以流量为切入点,从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、热点流量防护等多个维…

用python怎么输出个人信息,python输入输出学生信息

本篇文章给大家谈谈python输入自己的姓名,输出hello,某某某同学,以及python输入姓名打印学生信息,希望对各位有所帮助,不要忘了收藏本站喔。 校验身份证号码并输出个人信息 类型:流程控制 描述 中国目前采用的是18位身份证号&…

记录今日将C语言的Windows程序更改为python语言Windows程序,实现子窗口控制,类似微信程序框架最简单的原型

基本思路 为什么要选择python制作Windows应用程序,主要就是源代码直接展示,发现问题随时修改,同时可以不断增加新的功能方便。 由于C语言的Windows程序中结构类型在python中不能使用, 因此我们按照ctypes模块指导意见继承structu…

luttuce(RedisTempate)实现hash(动态数据) expire lua脚本

话不多说先放脚本: local argv ARGV local length #argv if length > 0 then local unpackArgs {} for i 1, length - 1 dotable.insert(unpackArgs, argv[i]) end if redis.call(exists, KEYS[1]) 1 thenredis.call(del, KEYS[1])redis.call(hset, KEYS[…

9.鸿蒙app用户界面的跳转abilityslice的跳转

9.用户界面的跳转abilityslice的跳转,值传递,数值累加 首页页面显示1,第2页显示2,再次点击返回首页3。。。 MainAbilitySlice.java 关键代码: 点击事件 text.setClickedListener(new Component.ClickedListener() …

SQL语句整理二--Mysql

文章目录 知识点梳理:1. mysql 中 in 和 exists 区别2. varchar 与 char 的区别 查看表结构:获取当前时间:查看建表语句:修改用户密码:查看所有用户:grant命令:判断当前数据库有多少连接数&…

day34算法训练|贪心算法

1005.K次取反后最大化的数组和 两次贪心算法思路 1. 数组中有负数时,把绝对值最大的负数取反 2. 数组全为非负数时,一直取反最小的那个数 步骤: 第一步:将数组按照绝对值大小从大到小排序,注意要按照绝对值的大小…

未来医疗的新希望:人工智能与智能器官的奇妙融合

导言 人工智能技术的不断演进在医疗领域掀起了一场革命。随着智能器官与人工智能的深度融合,虽然医学领域迎来了前所未有的机遇,但同时也伴随着一系列潜在的问题与挑战。本文将深入探讨人工智能如何与智能器官相互融合,为医学带来新的治疗可能…

GeoTrust SSL证书详细介绍

GeoTrust是著名的证书颁发CA机构DigiCert的品牌。GeoTrustSSL产品在Internet上提供从基本域名验证到扩展验证SSL标准支持的最高级验证的安全性。 GeoTrust OV(组织验证)证书验证域所有权和组织的存在。在颁发证书之前,会检查该组织在公共数据…

【网络安全】-Linux操作系统基础

文章目录 Linux操作系统目录结构Linux命令格式Linux文件和目录操作命令Linux用户和用户组操作命令Linux查看和操作文件内容命令Linux文件压缩和解压缩命令Linux网络管理命令Linux磁盘管理和系统状态命令Linux安全加固总结 Linux是一个强大的操作系统,广泛用于服务器…

2023年第四届 “赣网杯” 网络安全大赛 gwb-web3 Write UP【PHP 临时函数名特性 + 绕过trim函数】

一、题目如下: 二、代码解读: 这段代码是一个简单的PHP脚本,它接受通过GET请求传递的两个参数:‘pass’和’func’: ① $password trim($_GET[pass] ?? );:从GET请求中获取名为’pass’的参数&#xff0…

一天吃透Redis面试八股文

目录: Redis是什么?Redis优缺点?Redis为什么这么快?讲讲Redis的线程模型?Redis应用场景有哪些?Memcached和Redis的区别?为什么要用 Redis 而不用 map/guava 做缓存?Redis 数据类型有哪些&…

TSX-3225 (MHz范围晶体单元微型低轮廓贴片)

TSX-322系列晶体谐振器是爱普生主推的一款无源晶振型号,频率范围16mhz ~ 48mhz,3.2*2.5mm较小的外部尺寸,可以广泛使用在手机,蓝牙,无线-局域网、ISM 频段电台广播,MPU时钟等产品中。 规范 运动阻力(ESR) 外…

Python 全栈体系【四阶】(七)

第四章 机器学习 六、多项式回归 1. 什么是多项式回归 线性回归适用于数据呈线性分布的回归问题。如果数据样本呈明显非线性分布,线性回归模型就不再适用(下图左),而采用多项式回归可能更好(下图右)。例…

回归预测 | MATLAB实现GA-LSSVM基于遗传算法优化最小二乘向量机的多输入单输出数据回归预测模型 (多指标,多图)

回归预测 | MATLAB实现GA-LSSVM基于遗传算法优化最小二乘向量机的多输入单输出数据回归预测模型 (多指标,多图) 目录 回归预测 | MATLAB实现GA-LSSVM基于遗传算法优化最小二乘向量机的多输入单输出数据回归预测模型 (多指标&#…

Relocations for this machine are not implemented,IDA版本过低导致生成汇编代码失败

目录 1、问题描述 2、安卓app发生崩溃,需要查看汇编代码上下文去辅助分析 3、使用IDA打开.so动态库文件,提示Relocations for this machine are not implemented 4、IDA版本较老,不支持ARM64的指令集,使用7.0版本就可以了 5、…