java前端---css部分+盒子模型

最新推荐文章于 2026-06-23 23:18:49 发布
原创 最新推荐文章于 2026-06-23 23:18:49 发布 · 145 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css
本文详细介绍了CSS中的样式应用方式，包括内联样式、内部样式和外部样式的区别与使用。重点讲解了CSS选择器的分类，如元素选择器、类选择器、ID选择器、属性选择器、伪类选择器以及各种组合选择器的用法。此外，还列举了常见的样式属性，如边框、文本、盒子模型等属性的作用和用法，帮助开发者更好地理解和应用CSS进行网页开发。

网络开发工具：

 

 

内联样式 了解,几乎不用,维护艰难 内联样式是CSS声明在元素的style属性中，仅影响一个元素： 格式：

<标签 style="属性名:属性值; 属性名:属性值;">内容</标签>

内部样式

外部样式

 选择器分类

分类名称符号作用示例
基本选择器元素选择器标签名基于标签名匹配元素div{ }
类选择器.基于class属性值匹配元素.center{ }
ID选择器#基于id属性值匹配元素#username{ }
属性选择器属性选择器[]基于某属性匹配元素[type]{ }
伪类选择器伪类选择器:

用于向某些选择器添加特殊的效果(一般搭配超链接标签使用)

a : hover{ }
组合选择器后代选择器空格使用空格符号结合两个选择器，基于第一个选择器，匹配第二个选择器的所有后代元素.top li{ }
子级选择器>使用 > 结合两个选择器，基于第一个选择器，匹配第二个选择器的直接子级元素.top > li{ }
同级选择器~使用 ~ 结合两个选择器，基于第一个选择器，匹配第二个选择器的所有兄弟元素.l1 ~ li{ }
相邻选择器+使用 + 结合两个选择器，基于第一个选择器，匹配第二个选择器的相邻兄弟元素.l1 + li{ }
通用选择器*匹配文档中的所有内容*{ }

常见样式属性

分类属性名作用
边框border边框
border-top底部边框
border-radius设置边框圆角
文本color颜色
font-family字体样式
font-size字体大小
text-decoration下划线
text-align文本水平对齐
line-height行高，行间距
vertical-align文本垂直对齐

​​​​​​​

 盒子模型

 - element : 元素。
- padding : 内边距，也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距，也有资料将其翻译为空白或空白边。

零基础补Java开发。。。（前端部分）
wkkllw的博客
04-29 575
考研三年，同学都工作几年了我开始零基础学java（时间关系先速成，不深究原理）
Javaweb-CSS盒子模型
qq_45739810的博客
04-17 212
什么是盒子模型呢，举个栗子： 假设你写了俩正方形，一大一小，像酱紫 div { boder: 1px solid #bbffaa; } .div1 { width: 100px; height: 100px; } .div2 { width: 200px; height: 200px; } <d
CSS基础和js基础
逼哥很疯狂的博客
05-21 1234
组成： 首先，我们需要了解下web前端由哪些组成： 1. 页面结构：html、Servlet、jsp（Java Server Page）=html+java 2. 页面样式：css（Cascading Style Sheet，层叠样式表） 3. 页面交互：js（javascript）、jQuery、AJAX 一、CSS的优先级和继承： 1.1 CSS的优先级： 行内样式>ID选择器>类选择器>标签选择器。 就近原则。 1.2 CSS继承： 原则： ...
二·前端、交互、数据库——注意And疑惑
Today_He的博客
09-28 247
文章目录注意前端html交互MySql数据库疑惑前端交互MySql数据库 注意 前端 罗列：html、css、JavaScript、AJAX html 交互 罗列：JSP、Servlet MySql数据库 疑惑 前端 交互 MySql数据库
【Java Web学习 | 第五篇】CSS(4) -盒子模型
在代码与逻辑的星河里，捡拾技术的微光
11-02 4994
本文详细解析CSS盒子模型的三大核心要素：边框(border)、内边距(padding)和外边距(margin)，代码详细，图文并茂，非常适合新手学习
前端——JavaScript基础语法
温良
07-23 2581
是增强用户体验，可以交互的语言 引入JS的方式 内部方式——直接写在页面中 外部方式 基本语法 注释 输入输出语句 输入框 prompt(“提示内容”); 弹出警告框 alert(“提示内容”); 控制台输出 console.log(“显示内容”); 页面内容输出 document.write(“显示内容”); 变量和常量 java是弱类型语言，定义变量时不需要区分数据类型 原始数据局类型 typeof ...
基于vue网站组件库Element的使用
温良
07-27 928
过来！我教你怎么用（其实很简单。。） 介绍 Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。 使用Element前提必须要有Vue。 组件：组成网页的部件，例如超链接、按钮、图片、表格等等~ Element官网：https://element.eleme.cn/#/zh-CN 自己完成的按钮 Element 提供的按钮 布局方式 基础布局 容器布局 <..
前端——vue项目环境配置
温良
07-26 741
node类似一个浏览器，npm是包管理器。 搞node的开发者不想维护node了，所以把node交给了好友npm开发者，这个npm开发者就把两个搞一起去了。。 我们配置java环境的流程是下载jdk，下载idea，新建项目。而接下来的操作是vue创建项目的过程 步骤一：安装node，安装完记得检查安装版本(node安装很简单，大家在网上下载包后安装即可，本教程是针对安装好node后的后续操作) 步骤二：安装cnpm，这是阿里为了方便国内程序员维护的一个镜像，可以很快下载。安装完记得检查安装版本看
前端——Vue基础语法
温良
07-27 545
Vue介绍 Vue是一套构建用户界面的渐进式前端框架。 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。 特点 易用：在有HTMLCSSJavaScript的基础上，快速上手。 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。 性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。 Vue的使用 下载和引入vue.js文件。 编写入门程序。
表单的简单使用
温良
07-21 335
表单标签 <body> <!-- 表单标签：<form> 属性： action-提交的路径 method-提交的方式(get和post) autocomplete-记录补全(on和off) --> <!--get方式的表单--> <form action="#" method="get" autocomplete=.
前端——使用Vue命令创建项目
温良
07-26 232
切记路径在哪里项目就会被创建到哪里去，我切换到了自己想存储项目的路径下 创建项目命令，标红的是项目名 自己取 vue init webpack my-project 创建完成后截图如下 启动项目命令，根据以下命令提示进行 补充~ 如果在过程中出现问题，不动了，就结束掉重新做这步骤。结束批处理命令快捷键CTRL+C！！ ...
java前端部分——表格、盒子模型、Nginx服务器
温良
07-23 113
表格 盒子模型
前端基础内容
温良
07-21 95
主要就是简单用法，随便看看。 简单语法 在HTML中有两种重要元素类别，块级元素和内联元素。 块级元素： 独占一行。块级元素（block）在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。比如<p> ，<hr>，<li> ，<div>等。 行内元素 行内显示。行内元素不会导致换行。通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。比如<b>，<a
CSS 悬挂空白与选区溢出
luemeon的博客
06-16 459
在（或pre-line）模式下，浏览器被要求既要保留空格，又要自动换行。原则 A：空格必须保留（因为是pre-wrap原则 B：空格后面没有宽度了，必须换行。如果把这些行尾空格硬塞在当前行，气泡盒子就会被撑大；如果把它们带到下一行开头，下一行的文本又会无故缩进（这通常不是用户想要的）。这些行尾的空白字符不消失，而是“悬挂”在行末的边界之外。它们存在于这一行，但被当作“零零兵”，不占用整行盒子的实际布局宽度（Advance Width）。
【前端】CSS
Elena's Blog
06-23 172
作用特点标签选择器能选出所有相同标签不能差异化选择类选择器能选出一个或多个标签根据需求选择，最灵活，最常用id 选择器能选出一个标签同一个 id 在一个 HTML 中只能出现一次通配符选择器选择所有标签特殊情况下使用。
04_CSS及案例开发
人生得意须尽欢
06-17 344
本文摘要介绍了网页布局的核心概念和CSS盒子模型的应用要点。主要内容包括：1）盒子模型的基本用法，重点讲解内边距(padding)的四种设置方式及其对布局的影响；2）外边距(margin)的概念及其在调整元素位置时的作用；3）块元素与行内元素的区别及转换方法；4）浮动和定位技术的应用场景与实际案例开发。学习目标要求掌握盒子模型居中设置、元素类型转换、浮动布局实现、定位技术等核心技能，并通过案例练习巩固这些布局技术在实际网页开发中的应用。课程强调通过div标签划分网页结构，使用边距属性精细控制元素位置，为后续
vue学习第一阶段扩展：关于原子化CSS，DevTools插件以及小练习
2303_80072254的博客
06-17 285
* 每个组件写自己的样式文件 */直接用预定义的 class 名组合，不写自定义 CSS。-- 不用写 CSS，直接用 class 名表达样式 --> < div class = " bg-white rounded-lg p-4 " > < h1 class = " text-lg font-bold " > 标题 </ h1 > </ div >
前端入门精讲｜18个CSS高频进阶知识
2602_95057108的博客
06-21 236
承接上一篇CSS基础核心知识点，本篇继续深挖CSS进阶高频考点，涵盖布局适配、样式初始化、文本溢出、文档流、盒模型、属性继承、宽度适配等重难点内容。这些知识点是解决页面布局错乱、适配bug、样式兼容问题的核心，也是期末考试、前端入门面试的高频考题。全文搭配原理解析、区别对比、实战代码、踩坑总结，细节拉满，轻松拿下高分。在网页开发中，底部导航、版权信息、悬浮按钮等模块，需要永久固定在页面底部，不受页面滚动影响，最优解决方案为fixed固定定位组合样式。八、元素固定在网页底部的实现方案。
【CSS学习第七篇】
最新发布
2301_77399671的博客
06-23 118
CSS学习第七篇
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值