css基础标签及选择器，盒子模型基础

最新推荐文章于 2024-10-01 23:20:42 发布
最新推荐文章于 2024-10-01 23:20:42 发布
阅读量155 收藏
点赞数 1
文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z2223101919/article/details/127346646
版权

css标签写法

  • 内嵌式： 写在html页面中，通常写在head标签中，通常使用在小案例中

  • 外联式：新建一个.css文件中通过link标签引入，开发项目等使用

  • 行内式：写在标签的行内style属性中（通常不使用此方法，通常配合js使用）

基础选择器

选择器作用

  • 选择元素

标签选择器

  • 以标签名命名的选择器

  • 可以在head中利用标签选择器给某一段落附加一些style

  • 标签选择器会选中所有的标签生效

类选择器

可以使style对单个标签生效

结构：.类名

在head的style中定义一个类名，因额外i所有标签上都有class属性，可以在标签中通过class=”.类名“来定义

选择器-id

结构：#id属性值

个人理解与类选择器类似，但id在一个页面中是唯一的，不可重复

盒子模型

在这里插入图片描述

例margin定义

  • margin-top5px 顶端5个像素
  • maring-bottom5px 底端5个像素
  • margin-rignt:5px 右端5个像素
  • margin-left5px 左端5个像素
加边框

例：boder：5px blue solid

加像素为5的蓝色边框（boder是加入一个边框属性，blue表示颜色，solid表示边框样式）

更改不同方向的边框宽度方法与上面的margin类似，颜色及样式跟在像素后。

遥岑丿
关注
CSS盒子模型、表格标签（table）、表单标签（form）
shouhouxiaomuwu的专栏
05-13 1315
CSS盒子模型、表格标签（table）、表单标签（form）
css基础(3)——盒子模型，标签分类
qq_51913153的博客
05-16 684
1.盒子模型 css处理网页时，会认为每个标签都包含在一个不可见的盒子中 把每个标签看做一个盒子，那么定义布局实质上就是将每个盒子摆放到网页中相应的位置种，即可完成布局 一个盒子分为四部分，假如将一个教室看做一个盒子 ——内容区：存放标签中的内容与标签,width与height的实际设置的区域（就相当于教室中桌椅的位置） ——内边距：内容区与边框之间的距离（可看做教室过道） ——边框：内边距与外边距之间的距...
html-css标签 盒子模型
u010713935的博客
03-20 390
盒子模型 就是两个背景 红色做背景 黄色在红色上面，然后设置黄色距离红色左右上下的距离，也就是黄色背景在红色背景的位置 盒子的尺寸= 宽高+内边距(padding)+边框(border) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title...
html[css盒子模型、块级标签、行内(内联)标签、行内块标签，自闭合标签]
墨水白云的博客
03-17 1289
关于css盒子模型 用一句话概括就是： css盒子模型是一个拥有margin(外边距)、border(边框)、padding(内边距)、和content(内容)的盒子，用来封装周围的HTML元素。 可以通过box-sizing属性改变盒子模型的结构 box-sizing: content-box | padding-box | border-box(又称IE怪异盒模型) 1.标准的盒子模型 box-sizing:content-box(默认值)。 此时： width宽度 = content(内容宽度)
CSS盒子模型及标签分类
qq_71476546的博客
11-10 438
一个容器怎么适应屏幕的高：容器加 height：100%；body：100%；width、height 不设置的时候，对盒子模型的影响：会自动去计算容器的大小，节省代码。写四个值：30px 40px 50px 60px（上、右、下、左）替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。margin 左右自适应是可以的，但是上下自适应是不行的。opacity：0（透明）~1（不透明） 0.5（半透明）写两个值：30px 40px（上下、左右）%单位：换算->以父容器的大小进行换算的。
css基础3-盒子模型
12-05
CSS 基础 - 盒子模型 CSS 基础 - 盒子模型是 CSS 中的一個基础知识点，包括 CSS 三大特性、PxCook 的基本使用和盒子模型三个部分。 CSS 三大特性 CSS 三大特性包括继承性、层叠性和优先级。继承性是指子元素继承...
css学习 盒子模型 css基础
06-27
在这个“css学习 盒子模型 css基础”的主题中，我们将深入探讨CSS的基础知识，特别是盒子模型这一关键概念。 首先，让我们从CSS的基础语法开始。CSS采用选择器+声明的方式来指定元素的样式。选择器定位HTML元素，如...
前端基础知识包括盒子模型，css，html，布局和基础计算机进制知识
01-05
前端基础知识是每个前端开发者必须掌握的技能，这包括盒子模型、CSS、HTML、布局以及基础的计算机进制知识。下面我们将逐一深入探讨这些概念。 1. **盒子模型** 盒子模型是HTML元素在网页布局中的核心概念，它描述...
CSS 选择器，样式，盒子模型及浮动
weixin_52625590的博客
07-27 2120
CSS 选择器，样式，盒子模型及浮动
CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换
weixin_53155105的博客
08-03 585
CSS3 新增选择器 CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。 注意：类选择器、属性选择器、伪类选择器，权重为 10 结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 nth-child（n） 选择某个父元素的一个或多个特定的子元素（重点） 总结： 伪元素选择器（重点） 伪元素选择器可以帮助我们......
html点击出现对勾,css伪类右下角点击出现对号角标表示选中的代码
weixin_42477197的博客
06-22 1174
效果：css:.s_type {border: none;border-radius: 5px;background-color: #f3f3f3;padding: 7px 0;color: #606266;margin: 5px 2.5% 5px 0;width: 30%;position: relative;}.selecd {background-color: #ebf3ff;color: ...
CSS基础、盒子、选择器
gwhfamily的博客
04-26 405
CSS简介 css，即Cascading Style Sheet（层叠样式表）。HTML，CSS，JavaScript是前端技术中最核心的三个元素，HTML控制网页的结构，CSS控制网页的外观，而JavaScript控制网页的行为。 1995年W3C组织成立，CSS的创作成员成为了W3C的工作小组成员，1996年底，CSS初稿已经完成，同年12月，层叠样式表的第一份正式标准完成，成为w3c的推荐标准。 CSS的三种引用方式 优先级为内联式 > 嵌入式 > 外部式 外部样式表 外部样式表是最理
HTML+CSS+JavaScript入门精讲
07-24
7小时入门HTML/CSS带你零基础学习HTML和CSS基础知识,web小白也能轻松入门。目标驱动教学，拒绝填鸭式学习，轻松成为炙手可热的web前端工程师。6小时入门JavaScript基础：由浅入深的介绍JavaScript的语言特性，结合实际例子解析常见误区，启发你的思考，帮助学习者从入门到掌握，提升您的 JavaScript 技能。
css盒子概述
m0_63029399的博客
05-04 2848
盒子的概念 1.页面中的每一个标签,都可以看作一个盒子，通过盒子的视角更方便的进行布局。是 2.浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的 称之为盒子。 3. 盒子组成 css中规定每一个盒子分别由: 内容区域(content)、内边距区域(padding)、边框区域 (border)、外边距区域(margin)构成,这就是...
CSS列表标签+图片设置+盒子模型
Pig-pig-pig的博客
07-09 3379
一.CSS列表标签 1.简介 1.设置无序列表: <ul> <li>无序列表项1</li> <li>无序列表项2</li> </ul> 2.设置有序列表: <ol> <li>有序列表项1</li> <li>有序列表项2</li> </ol> 以小写字母为有序列表前的选项为list-style-type: lower-alph
CSS第五章 CSS盒子模型/标签分类和嵌套规范
晓葉斑比
05-18 1197
CSS五、CSS盒子模型5.1 标准盒子模型5.2 box-sizing样式5.3 盒子模型的一些问题1. margin叠加问题2. margin传递问题扩展 五、CSS盒子模型 5.1 标准盒子模型 组成 : content -> padding -> border -> margin            物品     &
CSS画出三角形的做法
最新发布
mingangel的博客
10-01 366
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS-Day3
m0_74039531的博客
09-29 365
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
如何用JavaScript编写一个简单的计数器
Jiaberrr的博客
10-01 424
在网页开发中，计数器是一种常见的功能，它可以帮助我们记录点击次数、显示时间等。下面我将介绍如何在HTML页面中使用JavaScript实现一个基本的计数器。
CSS基础：盒子模型与选择器优先级解析
"此文档主要介绍了CSS的基础知识，包括盒子模型、box-sizing属性、CSS选择器以及CSS优先级的计算规则。" 在Web开发中，CSS（层叠样式表）是用于控制网页元素呈现的重要工具。以下是对这些知识点的详细解释： 1. **...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值