WEB前端网页设计 CSS网页代码 基础参数(三)

news2024/12/24 3:30:53

 

目录

font-size属性单位;

color:文本颜色                 

间距

text-decoration:文本装饰

text-align:水平对齐方式

white-space:空白符处理

text-overflow:标示对象内溢出文本

盒子模型:

高度坍塌


插入图片:<img src="./图像URL">

font-size属性单位;

相对于当前对象内文本的字体尺寸

em

像素

px

绝对长度单位

说明

英寸

in

厘米

cm

毫米

mm

pt

color:文本颜色                 

#color:参数

预定义的颜色值

red,green,blue等

十六进制

#FF0000,#FF6600,#29D794等

RGB代码

表示纯红(255,0,0),纯绿(0,255,0),纯蓝(0,0,255)

RGB(以逗号为间隔)

白色(255,255,255),黑色(0.0.0)

间距

letter-spacing:字间距  

#letter-spacing:30px

word-spacing:单词间距

以像素为大小

line-height:行间距

以像素为大小

text-decoration:文本装饰

正常文本默认值

none

下划线

underline

上划线

overline

text-align:水平对齐方式

左对齐

left(默认值)

右对齐

right

居中对齐

center

text-indent:首行缩进------->>   text-indent2em

white-space:空白符处理

使用html制作网页时,不论源代码中有多少空格,在浏览器中只会显示一个字符的空白;

默认值

normal

预格式化

pre

空格空行无效

nowrap   #此参数内容只在一行并超出显示区域则下方出现滚动条

text-overflow:标示对象内溢出文本

格式:选择器{ text-overflow:属性值 }

修剪溢出文本

clip

用省略号标记“…”标识被修建文本

ellipsis

搭配使用

———————————————————————————————————————————————

盒子模型

“内容”-内边距-边框-外边距

每个盒子都有三个参数;以px为单位

容器标签

<div></div>

边框

实心边框

border

border:solid

内边距

padding

外边距

margin

上右下左

边框类型(虚线、实线)

border-style

实线:border-style:solid;

边框盒子长度(厚度)

border-width

例如:border-width:10px  20px; #表示上下盒子厚度

一个值--->全部,两个值-->上下,三个值--->,按上右下左的顺序;

border-width:10px;#若只有一个值 则表示 上下左右都是10px

边框盒子颜色

border-color

浮动   类似对齐

(多个浮动在一起则水平排列)

float:

左浮动-> float:left ;         右浮动->float:right;

清除浮动

clear:

both

例:clear:left   #表示清除此网页的浮动

清除所有浮动

将文字设置为正中间

height、

line-height

设置文字的左右居中--->text-align:center;

设置行高:line-height:100px;

高度坍塌

高度坍塌:在流式布局中十分常见。当父元素没有高度,子元素设置了float时。

原因:子元素脱离文档流,无法撑开父元素

解决方法

1

清除浮动

#给父元素设置高度

2

父元素设置overflowhidden

原理是利用overflow:hidden;创建了一个新的bfc,在新的bfc里面,自动高度会计算浮动元素的高度,于是有了这种解决高度坍塌的方法

缺点:当子元素有定位属性时,设置 overflow: hidden; 容器以外的部分会被裁剪掉。

3

给父元素设置伪类元素选择器,并设置常用的清除浮动的样式,然后after就会把盒子撑开;

右侧示例如是:

berfore表示在.A的内容前面添加其他内容

after     表示在.A的内容后面添加其他内容

 .A::after{

    content: "";              #添加内容

    display: block;          #转换元素类型为块元素

    clear: both;              #清除两侧浮动

   height:0; overflow:hidden;     #内容溢出则隐藏

   visibility:hidden;    #隐藏属性

}

4

给父元素添加display:table;属性

让父元素转化为元素类型跟表格的特性一样

弊端:会更改父元素的类型

5

边框属性

border-style

none无、solid单实线、dashed虚实线、dotted点线、double双实线

边框粗细

border-width

边框颜色

border-color

 

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

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

相关文章

Python课程设计-图书管理系统

Python课程设计-图书管理系统摘要第一章 绪论1.1 开发环境及技术1.2 系统实现功能描述第二章 功能详细设计与实现2.1 系统框架各层次实现2.1.1 可视页面设计2 数据库设计3 逻辑流程设计2.2 主要功能的设计与实现1 功能 1用户登录2 功能 2展示图书3 功能 3添加图书4 功能 4删除图…

3dmax 打开查看模型

下载一个3dmax模型如下图&#xff1b;包含一个.max文件&#xff0c;一个文件夹&#xff1b; 从File菜单打开该模型&#xff1b;打开对话框右侧会显示模型的一个缩略图&#xff1b; 有任何情况均忽略&#xff0c;直接打开&#xff0c;出现一个Scene Converter对话框&#xff0c;…

Spring MVC 源码分析

Spring MVC 源码分析1. 回顾Servlet1.1. 什么是Servlet1.2. Servlet工作模式1.3. Servlet的工作原理1.4. 源码分析1.4.1. Servlet接口1.4.2. GenericServlet抽象类1.4.3. HttpServlet抽象类1.5. Servlet的局限性2. Spring MVC简介2.1. 什么是MVC2.2. 什么是Spring MVC&#xff…

【深度学习】详解 BEiT

目录 摘要 一、引言 二、方法 2.1 图像表示 2.1.1 图像 patch 2.1.2 视觉 token 2.2 主干网络&#xff1a;图像 Transformer 2.3 预训练 BEiT&#xff1a;掩码图像建模 2.4 从变分自动编码器的角度来看 2.5 预训练设置 2.6 在下游视觉任务微调 BEiT 三、实验 3.…

谁还说我没表情包用?马上用Python采集上万张个表情包

前言 今天来表演一手 采集全网表情包图片 虽然我现在的wx表情包已经996个了&#xff0c;但是我还在存表情包哈哈&#xff0c;多了就继续删 现在跟人聊天&#xff0c;不发个表情包&#xff0c;我都觉得不对劲&#xff0c;怪难受的 索性今天就来&#xff0c;给你们分享一下&a…

Vue3:分析elementplus表格第一列序号hover变多选框实现思路

灵感来自Vue el-table 表格第一列序号与复选框hover切换 源码是通过Vue2elementui去实现的&#xff0c;本篇是通过Vue3elementplus实现&#xff0c;所以在代码上面有些许不同&#xff0c;但函数名一致 实现思路&#xff1a; ①通过表头是多选框&#xff0c;我们可以判定这一…

9.1、面向对象编程

文章目录面向对象编程简介面向对象编程面向对象编程的三大特性对象和类封装练习继承什么是继承重写父类方法多继承私有属性和私有方法多态项目案例&#xff1a;栈和队列的封装栈的封装队列的封装python是面向对象的编程语言 面向对象编程简介 “面向过程”(Procedure Oriente…

Java并发编程—synchronized

文章目录synchronized 的底层实现原理监视器锁对象的锁的获取过程如下&#xff1a;monitorexit&#xff1a;加synchronized锁前后对比synchronized的作用synchronized的三种主要用法synchronized为什么是 非公平锁&#xff1f;————————————————————————…

大数据项目 --- 电商数仓(一)

这个项目实在数据采集基础使用的,需要提前复习之前学的东西,否则的话就是很难继续学习.详见博客数据项目一 ---数据采集项目.大数据项目 --- 数据采集项目_YllasdW的博客-CSDN博客大数据第一个项目笔记整理https://blog.csdn.net/m0_47489229/article/details/127477626 目录 …

Android 基于物理特性动画 —— 弹簧动画

在安卓开发中我们可以通过动画添加视觉提示&#xff0c;向用户通知应用中的动态。当界面状态发生改变时&#xff08;例如有新内容加载或有新操作可用时&#xff09;&#xff0c;动画尤其有用。动画还为应用增加了优美的外观&#xff0c;使其拥有更高品质的外观和风格。 首先来…

Java并发编程—并发和并行、线程上下文

文章目录并发和并行并发和并行的区别上下文切换相关问题为什么循环次数少的情况下&#xff0c;单线程快&#xff1f;什么时候需要用多线程&#xff1f;线程上下文切换消耗的时长&#xff1f;用什么测试的线程上下文&#xff1f;面试回答下面的工具会加分&#xff1a;如何减少上…

DQL简介

学习笔记之DQL 数据查询语言&#xff0c;用来查询数据库中表的记录。 查询关键字&#xff1a;select 基本查询 1查询多个字段 select 字段1&#xff0c;字段2&#xff0c;字段3.. from 表名; select * from 表名;2设置别名 select 字段1 [别名1],字段2[别名2]... from 表名;3…

233搞懂HMM(隐马尔可夫)

文章目录2条性质3个参数3个问题维特比算法参考资料有向图模型&#xff0c;主要用于时序数据建模&#xff0c;在语音识别&#xff0c;自然语言处理等领域&#xff0c;以及在知识图谱命名实体识别中的序列标注&#xff0c;有广泛应用。 HMM模型由两部分组成&#xff0c; 观测变量…

spring boot 应用mybatis

Mybatis入门: Mybatis入门_做测试的喵酱的博客-CSDN博客 目录 一、spring boot 应用mybatis 核心 二、举例&#xff1a; 2.1 背景 2.2 项目结构&#xff1a; 2.3 依赖包 pom 2.4 项目配置文件application.yml 2.5 实例层entity 2.6 mybatis的mapper层 2.7 spring boot…

Android—过渡按钮的简单实现

Android—过渡按钮的简单实现前言准备工作登录页面(activity_main.xml)登录成功页面(activity_new.xml)主要代码给登录按钮设置监听事件(MainActivity.xml)点击登录按钮出现加载动画(TransitionButton.java)当isSuccessful判断为true时(MainActivity.xml)加载动画结束时切入跳转…

C语言笔记-16-Linux基础-文件元数据

C语言笔记-16-Linux基础-文件元数据 文章目录C语言笔记-16-Linux基础-文件元数据前言一、概述二、ln 硬连接三、软连接四、stat 获取元数据总结前言 自学笔记&#xff0c;没有历史知识铺垫&#xff08;省略百度部分&#xff09;C语言笔记-16-Linux基础-文件元数据 一、概述 文…

Kaggle泰坦尼克号-决策树Top 3%-0基础代码详解

Titanic Disaster Kaggle&#xff0c;里的经典入门题目&#xff0c;因为在学决策树所以找了一个实例学习了一下&#xff0c;完全萌新零基础&#xff0c;所以基本每一句都做了注释。 原文链接&#xff1a;Titanic: Simple Decision Tree model score(Top 3%) | Kaggle 目录 1.…

SolidWorks如何绘制环形波纹垫片

环形波纹垫片主要用于螺纹式固定件或者防滑螺纹固定中,那这个环形垫片一般怎么用SolidWorks制作呢?首先我们观察到这样的垫片是上下此起彼伏的波纹状,厚度一般1MM左右,制作起来还是有点小难度,但是通过仔细观察,我们可以看到它的大概走向,如图 也就是特征就是这边凹下去…

获取Android签名MD5的方式

形而上者谓之道&#xff0c;形而下者谓之器 我们在申请百度云/腾讯云等第三方的各种服务时&#xff0c;经常会遇到需要提供包名和签名MD5的情况。这里特地总结一下&#xff1a; 1. 获取MD5的一般方式 1.1 有签名文件(.keystore)的情况下: keytool -list -v -keystore XXX.key…

【沐风老师】3DMAX一键生成圣诞树建模插件使用教程

圣诞节快到了&#xff0c;给大家分享一款3DMax一键生成圣诞树模型插件&#xff1a; 3DMAX一键生成圣诞树建模插件&#xff0c;可以生成定制和随机两种3D圣诞树模型&#xff0c;并自动赋予材质和贴图。 【安装方法】 方法一&#xff1a;解压后直接拖动插件脚本文件到3dMax窗口…