前端学习-CSS基础-Day3

一、CSS三大特性

1.1层叠性

相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题

层叠性原则:

1.样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式

2.样式不冲突不会重叠

<style>div {color: red;font-size: 12px;}div {color: pink;就近原则保留pink,层叠掉red}
</style>

1.2继承性

子标签会继承父标签的某些样式:例如文本颜色,大小等

1.恰当使用继承可以简化代码,降低CSS样式的复杂性

2.子元素可以继承父元素的样式,text-,font-,line-,这些元素开头的可以继承,以及color属性

特殊继承:行高继承

<style>div {font: 14px/1.5 '微软雅黑';行高14*1.5px}p {font: 12px;行高会改变为12*1.5px}
</style>

运用继承性,可以方便子类修改字体大小,根据字体大小自动改变行高而不用修改行高

1.3优先级

选择器选择器权重
继承或者*0
元素选择器1
类选择器,伪类选择器10
ID选择器100
行内样式style=“”1000
!important重要的最高级

注意点:

1.权重是有4组数字组成,但是不会有进位

2.继承的权重为0,不管父类权重有多大,子类都是继承权重都是0

权重叠加

复合选择器有权重叠加,但不会进位

<style>ul li {权重:0001+0001color: red;}li {权重:0001color: green;}
</style>

二、盒子模型

1.看透网页布局的本质

网页布局过程:

1.先准备好相关的网页元素,网页元素基本都是盒子Box

2.利用CSS设置好盒子样式,然后摆放到相应位置

3.往盒子里面装内容

网页布局的核心本质:就是利用CSS摆盒子

2.盒子模型组成

盒子模型:就是把html页面中的布局元素看作是一个矩形的盒子,也就是一个橙装内容的容器

CSS盒子本质上是一个盒子,封装周围的HTML元素,它包括:边框,外边距,内边距和实际内容

构成作用
border边框盒子的外边框
content内容盒子内的元素
padding内边距盒子内元素与外边框的距离
margin外边距盒子与盒子之间的距离

2.1边框border

border可以设置元素的边框,有三部分组成:边框宽度,边框样式,边框颜色

语法

border: border-width || border-style || border-color
属性作用
border-width定义边框粗细单位像素
border-style边框的样式 solid实线 dashed虚线 dotted点线
border-color边框颜色

缩写

border: 1px solid blue;

border-top 上边框,其余同理

2.2表格的细线边框table

表格table就是一个盒子,table的边框就是border

border-collapse细线边框 合并相邻的边框

table,td {border: 1px solid blue;border-collapse;合并相邻边框,像素不会叠加
}

2.3边框会影响盒子的实际大小

盒子是固定大小的,边框是在盒子的外围增加

2.4内边距

padding属性用于设置内边距

padding-left: 20px;
属性作用
padding-left左内边距
padding-right右内边距
padding-top
padding-bottom

缩写:

值的个数表达意思
padding: 5px;表示上下左右内边距都是5px
padding: 5px 10px;上下是5,左右10
padding: 5px 10px 20px;上5,左右10,下20
padding: 5px 10px 20px 30px;上5右10下20左30 顺时针

padding也是会影响盒子实际大小的,会把盒子撑大

好处:给盒子设定padding,元素字数不同大小不同,盒子会自动增扩

当没有设置盒子指定大小

padding不会影响盒子大小

2.5外边距

margin属性用于设置盒子外边距

属性作用
margin-left左外边距
margin-right右外边距
margin-top
margin-bottom
值的个数表达意思
margin: 5px;表示上下左右外边距都是5px
margin: 5px 10px;上下是5,左右10
margin: 5px 10px 20px;上5,左右10,下20
margin:5px 10px 20px 30px;上5右10下20左30 顺时针

2.6外边距典型应用

外边距可以让块级盒子水平居中,但是必须满足两个条件:

1.盒子必须指定宽度

2.盒子左右外边距都设置为auto

.header { width: 960px; margin:0 auto; }

常见的写法:

1.margin-left: auto;margin-right: auto;2.margin:auto;3.margin:0 auto;

2.7外边距合并

使用margin定义块元素的垂直外边距时,可能会出现外边距的合并

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值

解决方案:

1.可以为父元素定义上边框

2.可以为父元素定义上内边框

3.可以为父元素添加overflow:hidden

2.8清除内外边距

网页元素很多带有默认的内外边距,不同浏览器默认的值也不一样,

因此在布局之前,首先要清除网页元素的内外边距

* {margin: 0;padding: 0;
}

CSS第一行代码

注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距,但是转换为块级和行内块元素就可以了

3.PS操作

三、小样式-导航栏

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.pad {border: 1px solid rgb(167, 167, 167);border-top-color: #ff8500;border-bottom-color: #edeef0;border-top-width: 3px;border-bottom-width: 1px;line-height: 41px;background-color: #fcfcfc;}a {display: inline-block;text-decoration: none;color: #4c4c4c;padding: 0 20px;height: 41px;}.pad a:hover {background-color: rgb(203, 198, 198);color: #ff0a0a;}</style>
</head>
<body><div class="pad"><a href="https://user.qzone.qq.com/1106665698/infocenter">我的空间</a><a href="https://mail.qq.com/cgi-bin/frame_html?sid=PtynEXGUd4GFP34Y&r=2a95572dd6f7f4cde27b75e1e87b9835&lang=zh">我的邮箱</a><a href="http://news.sdust.edu.cn/">科大新闻网</a><a href="https://www.4399.com/">4399小游戏</a><a href="../Demo01/demo2.html">九章算术</a></div>
</body>
</html>

效果

  

四、今日总结

学习完今天的课程,我对于基本的css网页布局具备了更多了解。

今天所学课程内容并不多,主要是学习了一上午的时间,下午和晚上要上课。昨天晚上做的小网页和今天的体会,让我体会到了时间并没有我想象中那么富裕,因此从头到尾一步一个坎学出来前端知识,对于现阶段的我来说性价比不高。

总结一下:

要在学中实践,在实践后继续学习。

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

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

相关文章

【QT+QGIS跨平台编译】043:【libprotobuf-lite+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

点击查看专栏目录 文章目录 一、libprotobuf-lite介绍二、文件下载三、文件分析四、pro文件五、编译实践一、libprotobuf-lite介绍 libprotobuf-lite 是 Protocol Buffers 的 C++ 轻量级运行时库,专门设计用于在资源受限的环境下使用。与标准的 libprotobuf(Protocol Buffers…

数据结构——AVL树详解

一、AVL树的定义 AVL全称叫做平衡二叉搜索&#xff08;搜索&#xff09;树&#xff0c;两位俄罗斯的数学家G.M.Adelson-Velskii 和E.M.Landis在1962年发明了一种方法&#xff1a; 当向二叉搜索树中插入新结点后&#xff0c;如果能保证每个结点的左右子树高度之差的绝对值不超…

最近公共祖先(lca)倍增算法【模板】

P3379 【模板】最近公共祖先&#xff08;LCA&#xff09; - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include<bits/stdc.h> #include<cstdio> using namespace std; const int N5e5100; const int inf0x3f3f3f; int n,m,s; vector<int>g[N]; int dep[…

halcon例程学习——ball.hdev

dev_update_window (off) dev_close_window () dev_open_window (0, 0, 728, 512, black, WindowID) read_image (Bond, die/die_03) dev_display (Bond) set_display_font (WindowID, 14, mono, true, false) *自带的 提示继续 disp_continue_message (WindowID, black, true)…

目标检测的相关模型图:YOLO系列和RCNN系列

目标检测的相关模型图&#xff1a;YOLO系列和RCNN系列 前言YOLO系列的图展示YOLOpassthroughYOLO2YOLO3YOLO4YOLO5 RCNN系列的图展示有关目标检测发展的 前言 最近好像大家也都在写毕业论文&#xff0c;前段时间跟朋友聊天&#xff0c;突然想起自己之前写画了一些关于YOLO、Fa…

货币系统(闫氏DP分析法)

题目描述&#xff1a; 给定 V 种货币&#xff08;单位&#xff1a;元&#xff09;&#xff0c;每种货币使用的次数不限。 不同种类的货币&#xff0c;面值可能是相同的。 现在&#xff0c;要你用这 V 种货币凑出 N 元钱&#xff0c;请问共有多少种不同的凑法。 输入格式&am…

C语言 C6031:返回值被忽略:“scanf“ 问题解决

我们在代码中 直接使用 scanf 就会出现这个错误 在最上面 加上 #define _CRT_SECURE_NO_WARNINGS//禁用安全函数警告 #pragma warning(disable:6031)//禁用 6031 的安全警告即可正常运行

llama-index 结合chatglm3-6B 利用RAG 基于文档智能问答

简介 llamaindex结合chatglm3使用 import os import torch from llama_index.core import VectorStoreIndex, ServiceContext from llama_index.core.callbacks import CallbackManager from llama_index.core.llms.callbacks import llm_completion_callback from llama_ind…

ArcGis Pro Python工具箱教程 03 工具箱中工具自定义

ArcGis Pro Python工具箱教程 03 工具箱中工具自定义 用于定义工作工具类的方法 工具方法必选或可选描述__ init __必需项right-aligned 初始化工具类。getParameterInfo可选定义工具的参数。isLicensed可选返回工具是否获得执行许可。updateParameters可选在用户每次在工具对…

登录拦截器

目录 &#x1f388;1.登陆拦截器的使用 &#x1f38a;2.ThreadLocal的简单使用 &#x1f383;3.登录拦截器拦截和放行配置 1.登陆拦截器的使用 创建一个拦截器类&#xff0c;必须让其实现HandlerInterceptor接口 1.获取前端的token 2.判断token是否为空 3.若为空&#xff…

自动发卡平台源码优化版,支持个人免签支付

源码下载地址&#xff1a;自动发卡平台源码优化版.zip 环境要求&#xff1a; php 8.0 v1.2.6◂ 1.修复店铺共享连接时异常问题 2024-03-13 23:54:20 v1.2.5 1.[新增]用户界面硬币增款扣款操作 2.[新增]前台对接库存信息显示 3.[新增]文件缓存工具类[FileCache] 4.[新增]库存同…

通讯控制板V1.2版本

通讯控制板硬件需求说明书 硬件组成 下图借鉴参考野火图纸 0. CAN接口 硬件需求 板载支持CAN通讯接口 CAN引脚功能PA12CAN_TXPA11CAN_RX 1. RS485接口 硬件需求 板载支持RS485通讯接口 RS485引脚功能PB10RS485_TXPB11RS485_RXPB12RS485_RE/DE 2. RS232接口 硬件需求 板…

C/C++ ③ —— C++11新特性

1. 类型推导 1.1 auto auto可以让编译器在编译期就推导出变量的类型 auto的使⽤必须⻢上初始化&#xff0c;否则⽆法推导出类型auto在⼀⾏定义多个变量时&#xff0c;各个变量的推导不能产⽣⼆义性&#xff0c;否则编译失败auto不能⽤作函数参数在类中auto不能⽤作⾮静态成员…

【Gitlab】Ubuntu Linux完全卸载gitlab-ce

删除服务 sudo gitlab-ctl uninstall清理所有产生的数据 会提示等待60秒&#xff0c;如果想反悔&#xff0c;可以按CtrlC sudo gitlab-ctl cleanse移除所有账户 sudo gitlab-ctl remove-accounts卸载软件 sudo apt remove gitlab-ce sudo apt purge gitlab-ce杀掉进程 ps…

Jackson 2.x 系列【5】注解大全篇一

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Jackson 版本 2.17.0 源码地址&#xff1a;https://gitee.com/pearl-organization/study-jackson-demo 文章目录 1. 前言2. 注解大全2.1 JsonIgnore2.2 JsonFormat2.3 JsonInclude2.4 JsonProper…

汉诺塔问题(从0开始)

文章目录 概要整体架构流程代码实现小结 概要 汉诺塔问题&#xff0c;是心理学实验研究常用的任务之一。该问题的主要材料包括三根高度相同的柱子和一些大小及颜色不同的圆盘&#xff0c;三根柱子分别为起始柱A、辅助柱B及目标柱C。 整体架构流程 对于这样一个问题&#xff…

【IP 组播】PIM-SM

目录 原理概述 实验目的 实验内容 实验拓扑 1.基本配置 2.配置IGP 3.配置PIM-SM 4.用户端DR与组播源端DR 5.从RPT切换到SPT 6.配置PIM-Silent接口 原理概述 PIM-SM 是一种基于Group-Shared Tree 的组播路由协议&#xff0c;与 PIM-DM 不同&#xff0c;它适合于组播组成…

javaScript | 报错:JSX expressions must have one parent element

#错误记录&#xff1a;在做一个练习时候出现这个错误 #错误原因分析&#xff1a;在React和JSX中&#xff0c;每个JSX表达式都必须有一个父元素。这意味着你想要渲染的所有组件或元素都必须被一个单独的容器所包含。这个规则的原因是JSX最终会被编译成调用React.createElement()…

分享react+three.js展示温湿度采集终端

前言 气象站将采集到的相关气象数据通过GPRS/3G/4G无线网络发送到气象站监测中心&#xff0c;摆脱了地理空间的限制。 前端&#xff1a;气象站主机将采集好的气象数据存储到本地&#xff0c;通过RS485等线路与GPRS/3G/4G无线设备相连。 通信&#xff1a;GPRS/3G/4G无线设备通…

Hudi面试题及参考答案:全面解析与实战应用

在大数据领域&#xff0c;Apache Hudi&#xff08;Hadoop Upserts and Incrementals&#xff09;作为一个高性能的数据存储框架&#xff0c;越来越受到企业的青睐。本文将为您提供一系列Hudi面试题及其参考答案&#xff0c;帮助您深入了解Hudi的核心概念、架构设计以及实战应用…