- 博客(16)
- 收藏
- 关注
RSS订阅原创 CSS盒模型
CSS 盒模型1、概述CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充、和实际内容。（即装东西的容器）所有 HTML 标签可以看作盒子，在 CSS 中，"box model" 这一术语是用来设计和布局时使用的。（即网页布局就是利用 CSS 摆盒子）2、内容 content概述：CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。 元素的内容及子元素默认从内容区域开始排列。2.1、width作用：设置宽度
2022-11-08 20:30:39
90
1
原创 CSS层叠性 浮动
1、css层叠性概念：当样式声明发生冲突时，用户代理需要确定样式声明的最终值，既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序 ，这个过程就叫做层叠当一个标签被相同的选择器 选择到的时候，相同的样式会发生层叠,遵循就近原则。不同的样式不会有影响总结css的层叠性是通过继承性 和 优先级实现样式声明不冲突 （同时应用于元素）样式声明冲突同级选择器，css样式中最后定义的声明应用于元素（就近原则）不同级选择器，由选择器优先级决定2、css长度单位p
2022-10-08 09:12:49
161
原创 CSS显示模式
CSS显示模式概述： 显示模式是指元素以什么方式显示，如div默认独占一行，span默认可以多个在一行排列，了解它们的特点与分类可以更好的布局网页。HTML元素一般分为块级元素与行内元素、行内块元素1、元素默认显示模式与元素特性总结本身属性为display:block;的元素 称为块级元素常见块级元素 div,h1-h6,p,ul,li,dl,dt,ol本身属性为display:inline;的元素称为行级元素常见行级元素：span,strong,em,i,a,b本身属性为dis
2022-10-08 09:10:12
162
原创 CSS盒模型
二、CSS 盒模型1.边框围绕着内容和内填充区域的线 1.border-width:边框的宽度 单位：像素 注意：只写一个border-width设置不上边框的宽的，得写上边框的线型 2.border-style：边框的线型 1.solid 单实线 2.double 双实线 3.dashed 条状虚线 4.dotted 点状边框
2022-10-08 09:08:16
61
原创 响应式设计
1、什么是响应式设计也叫响应式布局，响应式开发实现不同屏幕分辨率的终端上浏览网页的不同展示方式。响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局，从而在每种设备屏幕宽度下呈现的界面是不同的响应式布局原理：一个网站适配所有终端，实现不同屏幕分辨率下的终端上网页的不同布局；使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而达到适配不同屏幕的目的简单的说：响应式布局是元素随着屏幕发生宽高大小变化 + 盒子布局发生变化自适应：元素随着屏幕发生宽高大小变化优缺
2022-10-08 09:05:33
168
原创 CSS显示模式
CSS显示模式概述： 显示模式是指元素以什么方式显示，如div默认独占一行，span默认可以多个在一行排列，了解它们的特点与分类可以更好的布局网页。HTML元素一般分为块级元素与行内元素、行内块元素1、元素默认显示模式与元素特性总结本身属性为display:block;的元素 称为块级元素常见块级元素 div,h1-h6,p,ul,li,dl,dt,ol本身属性为display:inline;的元素称为行级元素常见行级元素：span,strong,em,i,a,b本身属性为dis
2022-09-28 19:42:38
51
原创 文本溢出处理显示省略号
一、文本溢出处理显示省略号1、单行文本溢出显示省略号方法1：省略号单行文本： width：200px；设置盒子的宽度(限制宽度) white-space：nowrap；设置文本不换行 overflow：hidden；溢出隐藏 text-overflow：ellipsis；文本溢出的显示省略号<style>.box{ width:200px; background-color:red; height:40px; line-height:4
2022-09-28 19:28:49
157
原创 css3定义帧动画
## 二、帧动画### 1、定义关键帧```html@keyframes 动画名称（英文） { 0% { /* 动画的开始 */ } 25% { /* 在25%的时候进行的一个动画 */ } 50% { /* 在50%的时候进行的一个动画 */ } 100% { /* 动画结束 */ } } from,to表示开始、结束状态，也可以使用0%,100%定义 @keyframes 动画名称（英文） { from { /* 动画开始 */ } to { /* 动画结束 */ } } ```### 2、引用帧动画`
2022-09-28 13:14:18
267
原创 css3过渡动画
# css3动画&2D|3D## 一、css3的transform属性- 2d坐标轴（图示） - x轴：水平，向右为正，向左为负- y轴：垂直，向下为正，向上为负## 2d转换的方法### 1、2D变形：平移、旋转、缩放、倾斜#### 1) transform: translate()平移
2022-09-28 13:10:48
298
1
原创 一、弹性盒子
# 一、弹性盒子## 1、什么是弹性盒子？- 弹性盒子是CSS3的一种新的布局模式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间- - 操作方便，布局简单，移动端使用广泛 - PC端浏览器支持情况较差 - IE11或更低版本中，不支持或部分支持 - 在盒模型中较为灵活- 弹性盒模型的内容包括：弹性容器、弹性子元素——项目- 原理：为父元素设置flex属性，控制子元素的位置及排列方式- 应用场景 : 移动端## 2、设置弹性盒子——display属性-
2022-09-24 02:15:49
78
原创 一calc函数
# 一、calc()函数- 用于动态计算长度值，值灵活- css3新增功能- 任何长度值都可以使用calc()函数进行计算；- calc()函数支持 "+", "-", "*", "/" 运算；- calc()函数使用标准的数学运算优先级规则；- 运算符前后都需要保留一个空格- 语法： calc(表达式)```html运算符前后都需要保留一个空格width: calc(100% - 200px); 减号的前后添加空格.box { width: calc(100% - (10px + 20px) * 2)
2022-09-22 13:35:33
147
原创 表格CSS属性
表格CSS 属性## 1、表格边框指定 CSS 表格边框，使用 border 属性，通常定义td,th的边框属性表格会呈现双边框，是因为表和 th / td 元素有独立的边界。table存在默认属性border-collapse：separate## 2、表格的折叠边框border-collapse 属性设置表格的边框是否被合并为一个单一的边框- 取值 - separate：边框独立（默认值） - collapse：相邻边框被合并* border-spacing:单元格之间的间距 * border-
2022-09-20 13:05:30
320
原创 初识CSS
# 一、初识CSS##学习目标- 能够说出什么是CSS- 熟悉CSS的语法规范- 掌握CSS的三种引入方式，能够使用3种引入方式写一个红色的小方块## 1、什么是CSS?### 全称Cascading Style Sheets通常称为CSS样式表或层叠样式表（级联样式表）### 作用- 为HTML标记语言提供了一种样式描述- 即【设置HTML页面中的元素的位置、排版、样式外观等】 如文本内容（字体、大小、对齐方式等）、图片的外形（宽、高、边框等）![](C:/Users/Administra
2022-09-20 12:32:33
133
原创 day02
a标签 利用锚点来跳转指定锚点处```html 定义锚点 <div id='锚点名称'></div> 引用锚点 <a href="#锚点名称">内容</a>```## 1、HTML列表#### 1、无序列表各列表项之间没有次序，各项之间为并列关系- 语法``` <ul><!-- 列表容器 --> <li>列表项</li> <li>列表项</li> <li>列表项&l
2022-09-18 11:48:57
224
原创 【## 1、浏览器及内核-】
- web浏览器是用于读取HTML文件，并将其作为网页显示- 浏览器最重要的部分或其核心是渲染引擎，我们一般称为内核；- 内核的作用负责对网页语法的解释并渲染网页；- 五大浏览器：chrome、safari、Firefox、Opera、IE 1.chrome 谷歌浏览器 生产商：Google 内核：webkit、blink 2.Firefox 火狐浏览器 生产商：Mozilla 内核：gecko 3.Safari 苹果浏览器 生产商：苹果公司 内核：webkit 4.opera 欧朋浏览器 生产商：
2022-09-18 11:34:28
250
原创 普通的女孩
我这样普普通通平平淡淡不特殊的女生，总想过轰轰烈烈起起落落的一生，我想要学会沉稳变的认真内心单纯，最好是死了以后载入史册变个名人你看这外面的雨下的有点狂 就好像我在雨里拉肖邦 纪念你今天离去的伤和明日的诗和远方一天女娲一边捏泥人一边笑，盘古不解，就问道：你在笑什么？女娲说：做人呐，最重要的就是开心要天天开心：我高喊无爱者永远自由，可余光还是会望向被爱者我认为分享欲真的很重要 不论爱情友情 分享欲是爱意的生起 如果对彼此根本没分享欲的话 那这段感情真的很糟糕 我只有喜欢你 认为你在心里很.
2022-08-16 01:17:45
46
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人