![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
html和css
html和css
qq_43101834
这个作者很懒,什么都没留下…
展开
-
css元素居中
元素居中有很多种方法,自己整理一下常用的。先来最复杂的,水平垂直都居中。1.flex大法,不论什么型号的元素,以下三句话解决问题。display:flex;justify-content:center;align-items:center;2.postion定位法2.1子元素不定宽高 .father3{ position: relative; background: coral; width:500px原创 2021-03-03 11:28:29 · 966 阅读 · 0 评论 -
input搜索框记录
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-sca原创 2021-02-08 14:57:15 · 412 阅读 · 0 评论 -
vscode重装设置记录
1.软件中文版2.自动更新代码设置默认打开谷歌,点开,点击扩展设置找到这个,下拉选择浏览器3.背景主题和注释{ "files.autoSave": "afterDelay", "open-in-browser.default": "Google Chrome", "liveServer.settings.donotShowInfoMsg": true, "liveServer.settings.CustomBrowser": "chrome", "wo原创 2021-02-05 11:29:50 · 124 阅读 · 0 评论 -
css元素和css定位
先说下css元素分类在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。在html中< div>、<p>、<h1>、<form>、<ul>和<li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。a{display:block;}块级元素特点:1、每个块级元素都从新的一原创 2021-02-04 14:41:07 · 89 阅读 · 0 评论 -
css选择器
选择器的优先级总结!important > 内联样式 style > ID 选择器 > 伪类选择器 > 属性选择器 = class 选择器 > 伪元素 > 元素(类型)选择器 > 关系选择器 > 通配符选择器来自这里具体说说选择器的分类元素选择器(即标签选择器)1.id选择器2.类选择器3.属性选择器4.后代选择器5.子元素选择器6.相邻兄弟选择器7.伪类伪类有这些:active 向被激活的元素添加样式。 :focus 向拥有原创 2021-02-04 13:19:33 · 61 阅读 · 0 评论 -
css响应式布局
在这里原创 2021-02-04 11:18:05 · 68 阅读 · 0 评论 -
css盒子模型理解
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。Margin(外边距) - 清除边框外的区域,外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域,内边距是透明的。Content(内容) - 盒子的内容,显示文本和图像。上面都是学.原创 2021-02-04 10:39:44 · 114 阅读 · 0 评论 -
css图片上面显示文字
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .main { width: 300px; height: 300px; padding: 10px; background-color: #0087F1; } .imgbox原创 2021-02-01 12:04:41 · 1584 阅读 · 0 评论 -
css当图片宽度为百分比,高度如何按宽度比例展示
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .main{ width:300px; height:300px; padding:10px; background-color: #0087F1; margin:10px;原创 2021-02-01 11:53:26 · 1794 阅读 · 0 评论 -
flex布局子元素超出父元素
遇到的问题:父元素是body,宽度给100%。子元素想要距离屏幕两侧各10px,但我给子元素也设置了100%且是flex布局,这时宽度超出屏幕,页面开始横向滑动!最终想要的效果是不横向滑动页面完整展示。现在记录一下这个问题,警告自己,当时写的时候脑子估计废掉了。类似上图中,子元素...原创 2021-01-26 18:23:13 · 7765 阅读 · 1 评论 -
css之文字超出处理
知识介绍word-break 属性规定自动换行的处理方法(例子没用):normal 使用浏览器默认的换行规则。:break-all 允许在单词内换行。:keep-all 只能在半角空格或连字符处换行。text-overflow 属性规定当文本溢出包含元素时发生的事情。:clip 修剪文本。:ellipsis 显示省略符号来代表被修剪的文本。:string 使用给定的字符串来代表被修剪的文本。white-space属性指定元素内的空白怎样处理。:normal 默认。空白会被浏览原创 2021-01-26 16:25:12 · 1347 阅读 · 0 评论 -
最简洁的代码美化复选框、单选框和滑动按钮
有空自己整理原创 2021-01-21 13:42:32 · 110 阅读 · 0 评论 -
css选择器选择第几个元素
有空自己整理一下原创 2021-01-21 13:41:32 · 946 阅读 · 0 评论 -
前端一些UI、插件工具
1.风格比较少女的弹窗sweetalert2.jq插件库3.其他博主精细推荐原创 2021-01-21 13:23:01 · 86 阅读 · 0 评论