内容列表
css-flex
flex-grow属性 放大比例,默认为0,即如果存在剩余空间,也不放大。flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。一、Flex 布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{  display: flex; }123行内元素也可以使用 Flex 布局。.box{  display: inline-flex; }123Webkit 内核的浏览器,必须加上-webkit前缀。.box{  display: -webkit-flex; /* Safari */  display: flex; }1234注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。二、基本概念采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。三、容器的属性以下6个属性设置在容器上。 -  flex-direction -  flex-wrap -  flex-flow -  justify-content -  align-items -  align-content1234563.1 flex-direction属性flex-direction属性决定主轴的方向(即项目的排列方向)。.box {  flex-direction: row | row-reverse | column | column-reverse; }123它可能有4个值。row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。3.2 flex-wrap属性默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。.box{  flex-wrap: nowrap | wrap | wrap-reverse; }123它可能取三个值。(1)nowrap(默认):不换行。(2)wrap:换行,第一行在上方。(3)wrap-reverse:换行,第一行在下方。3.3 flex-flow.box {  flex-flow: <flex-direction> || <flex-wrap>; }1233.4 justify-content属性justify-content属性定义了项目在主轴上的对齐方式。.box {  justify-content: flex-start | flex-end | center | space-between | space-around; }123它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。flex-start(默认值):左对齐flex-end:右对齐center: 居中space-between:两端对齐,项目之间的间隔都相等。space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。3.5 align-items属性align-items属性定义项目在交叉轴上如何对齐。.box {  align-items: flex-start | flex-end | center | baseline | stretch; }123它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。flex-start:交叉轴的起点对齐。flex-end:交叉轴的终点对齐。center:交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。3.6 align-content属性align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。.box {  align-content: flex-start | flex-end | center | space-between | space-around | stretch; } 123该属性可能取6个值。flex-start:与交叉轴的起点对齐。flex-end:与交叉轴的终点对齐。center:与交叉轴的中点对齐。space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch(默认值):轴线占满整个交叉轴。四、项目的属性以下6个属性设置在项目上。orderflex-growflex-shrinkflex-basisflexalign-self4.1 order属性order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。.item {  order: <integer>; }1234.2 flex-grow属性flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。.item {  flex-grow: <number>; /* default 0 */ }123如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。4.3 flex-shrink属性flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。.item {  flex-shrink: <number>; /* default 1 */ }123如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。4.4 flex-basis属性flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。.item {  flex-basis: <length> | auto; /* default auto */ }123它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。4.5 flex属性flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。.item {  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }123该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。4.6 align-self属性align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。.item {  align-self: auto | flex-start | flex-end | center | baseline | stretch; }123该属性可能取6个值,除了auto,其他都与align-items属性完全一致
2022-08-08
css常用样式 换行
强制不换行: p { white-space:nowrap; } 自动换行: p { word-wrap:break-word; } 强制英文单词断行: p { word-break:break-all; } 保留换行符,合并空白符序列: p { white-space: pre-line; } //超出的文本隐藏 overflow:hidden; //溢出用省略号显示 text-overflow:ellipsis; //溢出不换行 (只显示一行) 影响换行 white-space:nowrap; 两行显示 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; 强制不换行: p { white-space:nowrap; } 自动换行: p { word-wrap:break-word; } 强制英文单词断行: p { word-break:break-all; } 注意:设置强制将英文单词断行,需要将行内元素设置为块级元素。 超出显示省略号: p{text-overflow:ellipsis;overflow:hidden;} white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit; •white-space: 属性设置如何处理元素内的空白 •normal: 默认。空白会被浏览器忽略。 •pre: 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。 •nowrap: 文本不会换行,文本会在在同一行上继续,直到遇到 br 标签为止。 •pre-wrap: 保留空白符序列,但是正常地进行换行。 •pre-line: 合并空白符序列,但是保留换行符。 •inherit: 规定应该从父元素继承 white-space 属性的值。 word-wrap: normal|break-word; •word-wrap: 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 •normal: 只在允许的断字点换行(浏览器保持默认处理) •break-word: 在长单词或URL地址内部进行换行 word-break: normal|break-all|keep-all; •word-break 属性用来标明怎么样进行单词内的断句。 •normal:使用浏览器默认的换行规则。 •break-all:允许再单词内换行 •keep-all:只能在半角空格或连字符处换行 文本下划线位置 text-decoration-line 值 描述 none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 blink 定义闪烁的文本。 inherit 规定应该从父元素继承 text-decoration 属性的值。 文本下划线样式 text-decoration-style 值 描述 solid 默认值。线条显示为单行。 double 线条显示为双线。 dotted 线条显示为点线。 dashed 线条显示为虚线。 wavy 线条显示为波浪线。 initial 将此属性设置为其默认值。 inherit 从其父元素继承此属性。
2022-08-08
定位和地址相互转换(腾讯地图)
if (!function_exists('get_adcode_r')) { function get_adcode_r($lat,$lng ,$key){ $ch = curl_init(); try { curl_setopt($ch, CURLOPT_URL, "https://apis.map.qq.com/ws/geocoder/v1/?location=$lat,$lng&key=$key"); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5); $contents = curl_exec($ch); curl_close($ch); $contents = json_decode($contents,true); $rt = ['adcode'=>'','district'=>'','city'=>'','province'=>'','lng'=>'','lat'=>'' ]; if(isset($contents['result']) && isset($contents['result']['ad_info'])&& isset($contents['result']['ad_info']['adcode'])) { $rt['adcode'] = $contents['result']['ad_info']['adcode']; } if(isset($contents['result']) && isset($contents['result']['address_component']) && $contents['result']['address_component']) { $rt['district'] = $contents['result']['address_component']['district']; $rt['city'] = $contents['result']['address_component']['city']; $rt['province'] = $contents['result']['address_component']['province']; } if(isset($contents['result']) && isset($contents['result']['location'])&& $contents['result']['location'] ) { $rt['lng'] = $contents['result']['location'] ['lng']; $rt['lat'] = $contents['result']['location'] ['lat']; } } catch (Exception $e) { } return $rt; } } if (!function_exists('get_adcode')) { function get_adcode($addr ,$key){ $ch = curl_init(); try { curl_setopt($ch, CURLOPT_URL, "https://apis.map.qq.com/ws/geocoder/v1/?address=$addr&key=$key"); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5); $contents = curl_exec($ch); curl_close($ch); $contents = json_decode($contents,true); $rt = ['adcode'=>'','district'=>'','city'=>'','province'=>'','lng'=>'','lat'=>'' ]; if(isset($contents['result']) && isset($contents['result']['ad_info'])&& isset($contents['result']['ad_info']['adcode'])) { $rt['adcode'] = $contents['result']['ad_info']['adcode']; } if(isset($contents['result']) && isset($contents['result']['address_components']) && $contents['result']['address_components']) { $rt['district'] = $contents['result']['address_components']['district']; $rt['city'] = $contents['result']['address_components']['city']; $rt['province'] = $contents['result']['address_components']['province']; } if(isset($contents['result']) && isset($contents['result']['location'])&& $contents['result']['location'] ) { $rt['lng'] = $contents['result']['location'] ['lng']; $rt['lat'] = $contents['result']['location'] ['lat']; } } catch (Exception $e) { } return $rt; } }
2022-08-06
PHP正则表达式验证手机号、邮箱、身份证号码、姓名
PHP验证手机号正则表达式代码$phone='12345678910; $preg_phone='/^1[345789]\d{9}$/ims'; if(preg_match($preg_phone,$phone)){ echo 1; }else{ echo 0; }PHP验证邮箱地址正则表达式代码$email='123456@qq.com'; $preg_email='/^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@([a-zA-Z0-9]+[-.])+([a-z]{2,5})$/ims'; if(preg_match($preg_email,$email)){ echo 1;}else{ echo 0;}PHP验证身份证号正则表达式代码在 PHP 中,可以使用正则表达式来验证 18 位身份证号码的格式是否正确。下面是一个示例代码: $id_number = "440981198807260011"; if (preg_match("/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/", $id_number)) { echo "身份证格式正确"; } else { echo "身份证格式不正确"; } 如果是 15 位身份证号码,可以使用下面的正则表达式: $id_number = "440981198807261"; if (preg_match("/^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$/", $id_number)) { echo "身份证格式正确"; } else { echo "身份证格式不正确"; }注意:这里只是对身份证号中的数字与位数进行的验证,如果想要严格的验证,请参考本博客的关于身份证号码验证的其它文章。PHP验证是否只包含中文或英文的正则表达式代码$name='mochu'; $preg_name='/^[\x{4e00}-\x{9fa5}]{2,10}$|^[a-zA-Z\s]*[a-zA-Z\s]{2,20}$/isu'; if(preg_match($preg_name,$name)){ echo 1;}else{ echo 0;}PHP验证QQ号码的正则表达式代码$QQ='';$preg_QQ='/^\d{5,12}$/isu'; if(preg_match($preg_QQ,$QQ)){ echo 1;}else{ echo 0;}PHP验证是否微信号的正则表达式代码$wechat='cdxcfvsd515d5___1'; $preg_wechat='/^[_a-zA-Z0-9]{5,19}+$/isu'; if(preg_match($preg_wechat,$wechat)){ echo 1;}else{ echo 0;}PHP验证是否特殊符号的正则表达式代码$spacial='^%**Y*('; $preg_spacial="/\/|\~|\!|\@|\#|\\$|\%|\^|\&|\*|\(|\)|\+|\{|\}|\:|\<|\>|\?|\[|\]|\,|\/|\;|\\' | \`|\-|\=|\\\|\|/isu"; if(preg_match($preg_spacial,$spacial)){ echo 1;}else{ echo 0;}PHP验证是否银行卡号码正则表达式代码$bankcard=''; $preg_bankcard='/^(\d{15}|\d{16}|\d{19})$/isu'; if(preg_match($preg_card,$bankcard)){ echo 1;}else{ echo 0;}PHP验证固定号码的正则表达式$call='02312345678'; $preg_call='/^(0\d{2,3})?(\d{7,8})$/ims'; if(preg_match($preg_call,$call)){ echo 1;}else{ echo 0;}
2022-06-17