![](https://img-blog.csdnimg.cn/20190927151132530.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS+CSS3
文章平均质量分 50
CSS+CSS3
么心么肺
不求风sao惊天下,但求猥琐动世人 ...
展开
-
爱心飘落效果实现
<style> html, body { margin: 0; background-image: url("./images/1.jpg"); overflow: hidden; } .snowfall-flakes { margin: 20px auto; /* background-col.原创 2020-07-21 14:46:05 · 523 阅读 · 0 评论 -
CSS实现吃豆豆效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>吃.原创 2020-07-17 17:17:26 · 463 阅读 · 0 评论 -
CSS实现两边固定中间自适应的方法
效果如下利用flex布局 <div class="box"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div> .box{ display: flex; justi原创 2020-09-04 17:09:13 · 402 阅读 · 0 评论 -
CSS实现盒子水平垂直居中的方法
<div class="outside"> <div class="inside"></div> </div>利用定位,考虑盒子的宽高 .outside { width: 800px; height: 600px; border: 1px solid red; margin: 100px auto; .原创 2020-09-03 12:01:16 · 84 阅读 · 0 评论 -
样式布局(3) flex布局
一.什么是flex(fixible box)布局Flex是Flexible Box的缩写,顾名思义为“弹性布局”,用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex 布局。eg.(1)任何一个容器都可以指定为Flex 布局。.box{disply:flex;}(2)行内元素也可以使用Flex布局。.box{ display:inline-flex;}(3)webkit内...原创 2019-11-17 15:55:02 · 261 阅读 · 0 评论 -
样式布局(2) CSS三大特性和盒模型
css样式的三种引入方法:1.行内样式:就是直接在标签的开始标签中,使用style属性2.内部样式:直接使用style标签来完成,但style标签一定要写在head部分3.外部样式:将css作为一个独立的文件来保存,一般后缀.css,通过link标签引入css基本选择器:类型选择器:也叫标签选择器,或叫元素选择器。要使用id选择器:需要分成两个步骤:第一步,需要在对应的标签中增加一个...原创 2019-11-17 14:28:04 · 204 阅读 · 0 评论 -
样式布局(1) 流式布局,浮动布局,层布局, flex布局
4,如果一个元素浮动了,先向上移动,直到贴靠到父元素的边界,接着,如果是左浮动,就向左移动,直到移动到父元素的左边界,如果是向右浮动,就向右移动,直接移动到父元素的右边界。8,当一个浮动起来的男盒子,没有设置width,那么这个盒子的宽高会尽可能小,小到包裹住它里面的内容,这叫包裹性,1,在一个父元素内部,如果一个元素浮动了,那么它就脱离了标准文档流,后面的元素就让向上–>向左排。3,如果多个元素浮动了,那么这们就会并排显示,如果都是同一个方向的浮动,它们会紧紧地贴在一起。原创 2019-11-17 14:16:25 · 276 阅读 · 0 评论