css ＜样式一＞

于 2024-09-17 22:59:44 发布
阅读量156 收藏
点赞数
文章标签： css android java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43689953/article/details/142319231
版权 
1. 盒子模型
1.1>boarder

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

boarder  相邻框合并问题

在这里插入图片描述

boarder-classpse 相同的边框会合并在一起
text-alicn  center 文字居中对齐
########### boarder 会撑大盒子的实际大小
一个盒子加了boarder之后会变大的

在这里插入图片描述

 我可以把我的盒子内容进行修改, 减少像素
 

内容距离盒子的位置 叫做内边距

在这里插入图片描述

pading也会影响盒子的大小, 默认是紧贴在一起的
pading-top 内容和上边的距离

在这里插入图片描述

内边距 pading

在这里插入图片描述

pading会增大盒子的

在这里插入图片描述

盒子如果没有wight/hight 则此时pading不会撑大盒子

在这里插入图片描述

宽度不变化  因为我们此时没有撑开宽度
只要有这个属性 宽度就会发生变化
没有指定宽度 和父亲一样宽

浮动 float 

为什么用浮动
多个块级的盒子排成一行
>行内块元素

在这里插入图片描述

#2.0 标准流可以管理竖着排列 浮动可以管理横着排列的

在这里插入图片描述

float left right none

在这里插入图片描述
在这里插入图片描述

eg:

在这里插入图片描述

标准流 如果我加了浮动 后 我就会脱离位置

在这里插入图片描述

 如果我只给粉色的盒子加了浮动 蓝色的盒子没有加浮动 就会显示出这种叠加效果

在这里插入图片描述

 我给我这个盒子加上float_left 意思是 我这个盒子我就有浮动了
2个盒子都设置浮动  就在左边进行排列
所有浮动得盒子都是在一行内进行对齐的，并且是顶端对齐的

在这里插入图片描述

  我给我4个div 都加一个float left 就都向左移动

在这里插入图片描述

浮动得盒子  浏览器变小后 会掉下来,4个浮动的div盒子  浏览器缩小后会掉下来

在这里插入图片描述

如果屏幕再变小的话 会掉下来2个

在这里插入图片描述

 浮动的盒子就会脱标
 浮动的元素具备行内块元素特征
行内元素不能直接设置宽度和高度

在这里插入图片描述

span是行内元素 给宽高是无效的  加了float 之后就可以有宽高了

在这里插入图片描述

我们2个span 行内元素是没有宽高的 所以我们加了float之后 就有行内块元素的特性了  在一行显示 而且
具备行内块元素的特点 第一个在一行上 第二都是有宽度 有高度的

所以给我们行内元素添加了浮动 他就有行内块元素的特性
块级元素也一样  有宽度 有高度 加了浮动效果以后

在这里插入图片描述

不管你以前是什么元素 加了浮动之后都具备行内块元素的特性
父元素管上下 子元素管左右
#  f浮动的元素通常配合父级别使用

在这里插入图片描述

在这里插入代码片

在这里插入图片描述


所以我们的盒子不能直接加浮动 因为他是以浏览器为准  所以我们要以一个盒子包裹
先要准备一个大的父盒子

在这里插入图片描述
在这里插入图片描述

浮动盒子都是启一行的 只不过显示不开了 另起一行了

浮动布局的注意点  浮动和标准流的父盒子搭配
父元素管理上下

在这里插入图片描述
#############################\

 第二个盒子没有浮动就会造成这个问题

在这里插入图片描述

 第二个盒子没有浮动就会造成这个问题

#######################  清除浮动

所有的父盒子都是有高度的么 只有浮动的盒子才能在一行上

在这里插入图片描述

像这种子孩子太多 就不方便给高度,父盒子高度此时就不能写死
因为此时我们不知道有多少产品

我不给父盒子高度 让子盒子撑开,
很多时候父盒子不方便给高度, 浮动的元素是不占有位置的


此时父盒子的高度就是0 ，如果父盒子没有高度  我们的父元素高度就是0

在这里插入图片描述
在这里插入图片描述

		父盒子下面的div 就会拉上去
		父亲没有高度 只要给孩子加了浮动 我父亲高度就变成0  就是因为我父亲没有高度  因为我们此时想用孩子来撑开父亲的高度

		为了解决这个问题 我们要清除浮动

在这里插入图片描述

父亲高度为0 就会影响下面的高度

在这里插入图片描述

父盒子托标  清除浮动  因为i父盒子在很多情况下不需要高度的

在这里插入图片描述
在这里插入图片描述

清除浮动后 父亲有了高度 和子孩子一样  孩子有多高 我子盒子就有多高
孩子有多少不要紧  我能够自动检测高度
不会影响我们的页面布局 清除了浮动

在这里插入图片描述

#########################?
定位

在这里插入图片描述

1. 我们学习定位， 在开发中有什么常见场景  为什么需要定位

在这里插入图片描述
在这里插入图片描述

###############################>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

在这里插入图片描述

########### 或者我们可以让盒子固定到我们屏幕中的位置
 小盒子在我大盒子中间自由移动位置  并且可以压住其他盒子

在这里插入图片描述

####>定位  将盒子定在某一个位置上，所以定位也是摆放盒子，按照定位的方式移动盒子

定位的组成
###  定位模式+边偏移

relation 相对定位

相对定位相对于自身原来位置来走的  -----------？？  不是以浏览器为准 
也不是以父亲为准  是以他原来为准

在这里插入图片描述

 他走之后  他的位置 ？？？？？？ 还在保留
下面的盒子不会跑到他下面

在这里插入图片描述

相对定位不脱标,相对定位 边偏移和浏览器没有关系 和原来的位置有关系
我都是以自己原来位置移动的， 第二条我下面的盒子没有升上去 也就是我没有脱标

在这里插入图片描述

相对定位
相对于自己原来的位置来进行移动的
不脱标  还继续在标准流中 也就是他原来位置还继续保留的

#####################>>>绝对定位  
元素如果加了绝对定位  是根据他的父元素来决定定位的
绝对定位如果没有父亲就会以浏览器对齐  
他有父亲 但是父亲没有定位
你的父亲虽然	已经有了 但是没有定位 所以孩子加了绝对i定位之后还是以浏览器为准

在这里插入图片描述

绝对定位的使用特点 【没有父元素 或者父元素没有定位  子盒子】 就会以浏览器为准

 我要让我里面的盒子在我父元素的中间来回移动

在这里插入图片描述

############>>>>>>>..怎么吧一个绝对定位的盒子约束到规定的父元素中

在这里插入图片描述
在这里插入图片描述

父亲有定位 了 孩子只能在父亲的定位框中
以我父元素为准 
约束我的绝对定位 让我的绝对定位在父盒子里面

在这里插入图片描述

################################
 绝对定位 不再占有位置  脱离标准流
 不保留位置 会浮动下来

在这里插入图片描述

绝对定位是不占有位置的


##  相对定位和绝对定位到底有什么样的场景  什么时候用相对定位 什么时候用绝对定位
 子绝父相 的由来
父盒子必须要加定位来限制我子盒子要在父盒子内部

在这里插入图片描述

fixed 固定定位
 固定定位有什么样的使用场景
  浏览器在滚动的时候 我浏览器元素位置不会滚动

在这里插入图片描述

 什么是浏览器的可视窗口,

在这里插入图片描述

浏览器的可视窗口

在这里插入图片描述

  最简单的固定定位的写法

在这里插入图片描述

 浏览器变大 永远在我这个可视区域的右上角
固定定位是以浏览器的可视窗口为

在这里插入图片描述
在这里插入图片描述

  你加了 固定定位后 会脱标 不占有位置的
不再保留位置的

在这里插入图片描述
在这里插入图片描述

相对定位 不托标 x相对于原来位置移动位置 来移动位置
绝对定位 如果没有父级 或者父级没有定位是以浏览器为基准
##  子绝父相
 三个盒子都加了绝对定位都会托标 基于浏览器 然后 谁在上面

在这里插入图片描述
在这里插入图片描述

定位的 层叠性  使用z-index  让定位的盒子层叠加起来

在这里插入图片描述

绝对定位的盒子剧中

在这里插入图片描述

我给这个div加一个margon 0 auto 就会水平居中

但是加了绝对定位的盒子 加margon 0 auto 就会水平居中  是不启动效果的
只要我加了绝对定位的盒子 默认是贴着我这个浏览器的左侧来显示的
  但是我想让他在整个浏览器的水平居中显示 怎么做

在这里插入图片描述

在这里插入代码片

在这里插入图片描述

你不管怎么做 我box 还是在我可视区 的水平居中 垂直剧中  缩放浏览器

在这里插入图片描述

####  行内元素加了绝对定位和相对定位  也可以直接设置高度、宽度

在这里插入图片描述

  我给我们span 加宽度 或者加高度 只能转换或者加浮动

在这里插入图片描述

 我加了定位之后 我span 行内元素就有宽度和高度了

在这里插入图片描述

  我div 的宽度就是内容的宽度了

在这里插入图片描述

############################

在这里插入图片描述

  float 会把文字全部露出来

在这里插入图片描述

在这里插入代码片

在这里插入图片描述

在这里插入代码片

在这里插入图片描述
在这里插入图片描述

一个诺诺前行的后端程序员
关注
html css 漂亮的列表 <ul> <li>,Css <ul><li>列表的样式的控制
weixin_31001855的博客
06-22 5267
您的位置：首页 - 教程 - CSS - 正文Css 列表的样式的控制列表是HTML里一种很有用的显示方式，可以把相关的并列内容整齐地垂直排列，使网页显得整洁专业，并让浏览者有一目了然的感觉。列表是HTML里一种很有用的显示方式，可以把相关的并列内容整齐地垂直排列，使网页显得整洁专业，并让浏览者有一目了然的感觉。样式表为列表增加了一些功能，控制列表的样式包括列表样式、图形符号、列表位置三个部分。1...
css列表大全,CSS中<li>列表样式汇总大全，全实例展示
weixin_35697229的博客
08-03 2274
CSS中列表样式li {list-style-type:符号名称}css中用list-style-type指定列表(lists)前面符号,如下：li {list-style-type:符号名称}符号名称可用的值为：disc：CSS1 实心圆列表标签样式展示1列表标签样式展示2列表标签样式展示3circle:CSS1 空心圆列表标签样式展示1列表标签样式展示2列表标签样式展示3square:CSS1...
<a></a>链接的css样式
一个很酷的人
08-02 3892
style type="text/css"> a:link {text-decoration:none;color:blue;} a:hover {text-decoration:underline;color:red;} a:active{text-decoration:none;color:yellow;} a:visited {text
CSS 通过＜link/＞标签引入CSS样式
qq_27232945的博客
11-02 2686
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="1.css"> </head> <body> <div>div标签1</div> <div&gt.
css 换行标签＜br＞与＜p＞
baidu_40537062的博客
09-01 1843
两个换行的标签区别
内嵌式CSS样式＜style＞
此地无银三百两
03-08 3828
<style>定义和用法 <style>标签用于为HTML文档定义样式信息，在<style>元素里，可以指定HTML元素在浏览器里的呈现方式。 必选属性type用于指明<style>元素的内容，目前仅支持“text/css”一个值。 <style>标签应放在<head>里，<tytle>之后。 定义好CSS样式后，可以重复使用，让网页制作更高校快捷，代码重用性更高。 属性 样例代码： <%@ page langua
<li></li>标签的属性/样式
vuvivian的博客
07-05 4838
<li></li>标签的属性/样式
1.1 css style 样式定义：行内 style 属性、单页 ＜style＞ 标签、多页 ＜style＞ 标签
一个字，学
03-15 7052
把长宽等样式定义在某个标签的属性中，仅对当前标签产生影响，如：style 里面不能省略掉像素单位 px两种定义属性的方式：不用 style：用 style：此时一般把 定义在 标签里面：标签中的样式可以对该页面的同一类/多类元素产生影响：除了直接对某类标签统一设置样式，还可以结合 class 属性分类设置样式：class 类名可以多个组合在一起： 3.多页 标签：对多个页面产生影响 在 css 文件夹中新建 文件，把单页 标签里面的内容剪切进来，然后回到 标签 里面添加 标签，就能对多个页面产
css中如何设置hr的样式？css <hr>标签多种样式（图文）
lin123_00的博客
05-11 1万+
在对html网页进行美化的时候，肯定少不了要用的hr标签进行修饰页面，但默认的hr标签样式对页面的修饰起不到什么好的作用，有经验的前端工作者就会通过使用css样式来对hr标签进行一些美化的操作。那么如何在css中给hr标签设置样式呢？本章就给大家介绍css设置hr标签的几种样式。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） 一、hr的是什么意思 简单来说，hr就是html页面上的一条水平分隔
HTML ＜span＞标签
热门推荐
allway2的博客
10-19 4万+
HTML 中的标签被视为内联元素。它类似于 div 标记，但 div 标记特意用于块级元素，而 span 用于内联元素。HTML 中的 Span 标记用于通过使用元素类或 id 属性为特定内容提供样式。使用 HTML 文档中的 span 标记本身无法进行视觉更改。从上述所有信息中，我们了解到HTML中的标记用于为内联元素提供样式。Span标签主要用于在内联CSS的帮助下在我们的网页上排列结构部分和适当的布局部分。span标记在 HTML 中的属性。HTML中的span标记示例。
形考任务四活动1：采用CSS样式来设置背景、标题和段落的颜色。.zip
11-24
<title>形考任务四 - CSS样式应用</title> <style> body { background-color: blue; } h1 { color: red; } p { color: green; } </style> </head> <body> <h1>这是一个红色的一级标题</h1> <p>这是一个绿色...
形考任务五 使用 元素以及CSS样式表对下面的内容进行的布局设计.zip
11-24
在本形考任务中，我们将探讨如何利用HTML的`<div>`元素以及CSS样式表来实现页面布局设计。`<div>`元素是HTML中的一个非常重要的结构元素，它用于组合其他HTML元素，形成一个可样式的区块。在这个任务中，我们将深入...
【建议收藏】万字整理，一篇文章帮你掌握 Css 选择器
余光的博客
09-06 3712
【建议收藏】万字整理，一篇文章帮你掌握 Css 选择器 简介直观的 css 选择器，可以美化我们的代码，提高可读性，甚至对浏览器的 Css 解析也有帮助。本篇文章的灵感来自于CSS Diner——一个有趣的 css 选择器小游戏，借助下面的例子相信你一定能掌握 css 选择器的妙用，加油～ 全篇文章共22个例子，分别使用了 标签选择器 class id 伪元素 伪类 属性 篇幅较长，建议收藏 阅读指南 先贴出选择器字典，帮助大家回忆基本的选择器含义 阅读示例 阅读代码，并完成题目（仅思考选择器部
没有什么效果的html标签,<h1><fontcolor="red">为什么像这样的标签输入没有效果呢.。。。</font></h1>_html/css_WEB-ITnose...
weixin_42297390的博客
06-05 1962
为什么像这样的标签输入没有效果呢.。。。_html/css_WEB-ITnose html 标签 有没有人能解释一下，是被过滤了吗，是通过什么技术实现的回复讨论(解决方案)求科普。。。建议你不要用行内样式，直接用CSS样式比较好，你这个可能是权限不够高造成的样式被叠加了，h1{color:red;}这样会有效果的标签在XHTML及HTML4.0后不再被支持。且W3C标准...
《CSS新世界》书评
zhangxueyi的专栏
09-13 409
这本书是“CSS世界三部曲”中的最后一部，全书近600页，内容丰富，涵盖了CSS的全局知识、已有属性的增强、新布局方式、移动开发中的CSS新特性、CSS变量、文本和图像内容的增强、滤镜和混合模式、用户行为相关CSS等多个方面。《CSS新世界》的主要目标是帮助前端开发者突破CSS技能提升的瓶颈，适合具有一定CSS基础的前端开发者阅读。总的来说，《CSS新世界》是一本全面、深入且实用的CSS学习书籍，无论是对于想要深入了解CSS新特性的前端开发者，还是对于希望提升自己CSS技能的读者，都是一本值得一读的好书。
Layout 布局组件快速搭建
最新发布
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
09-13 1396
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
HTML、CSS实现树状图
p_s_p的博客
09-09 686
【代码】HTML、CSS实现树状图。
js的书写位置和css的书写位置的区别？为什么要这样写？
QQ1257871322的博客
09-10 483
这种分离方式有助于优化加载速度和页面渲染性能，使得 HTML、CSS 和 JavaScript 各司其职，各自处理不同的任务。JavaScript 用于添加页面的动态行为和交互。标签之前），以确保在执行脚本时页面的 DOM 元素已经加载完毕，从而避免脚本执行时无法找到需要操作的元素。CSS 主要用于控制页面的视觉样式和布局，通常在 HTML 文件的。部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。标签中，或者在外部样式表文件中（标签中，或者在外部脚本文件中（
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 2507
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
<a href="register.html"> 注册 <span></span> <span></span> <span></span> <span></span> </a>为什么我把span改成button就是去css动态样式了
07-14
如果您将`<span>`元素改为`<button>`元素，可能导致CSS动态样式失效的原因是，`<button>`元素在不同浏览器中的默认样式可能存在差异，并且可能会覆盖或影响您自定义的CSS样式。 为了解决这个问题，您可以尝试在`<button>`元素上添加一个自定义的类，并在CSS样式表中为该类添加所需的样式。这样可以确保按钮保持原来的样式，并且可以应用您自定义的动态样式。 以下是修改后的代码示例： ```html <a href="register.html"> <button class="register-btn"> 注册 <span></span> <span></span> <span></span> <span></span> </button> </a> ``` 在CSS样式表中，您可以为`.register-btn`类添加所需的样式： ```css .register-btn { /* 添加您自定义的样式 */ } ``` 请根据您的具体需求和样式要求，修改和添加适当的CSS样式来实现所需的动态效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值